10 examples of 'create new component in angular 6' in JavaScript

25
public CreateComponent(tmpl: string, injectDirectives: any[]): any {
26
27
    @Component({
28
        selector: 'dynamic-component',
29
        template: tmpl
30
    }) //directives: injectDirectives,
31
    class CustomDynamicComponent implements IHaveDynamicData {
32
33
        public name: string;
34
        public entity: { description: string };
35
    }
36
    ;
37
38
    return CustomDynamicComponent;
39
}

35
public static create ($elements:JQuery, ComponentClass:any, scope:DisplayObjectContainer = null):Array
36
{
37
    const list:Array = [];
38
    let component:DisplayObject;
39
    let $element:JQuery;
40
    const length:number = $elements.length;
41
    let types:any;
42
    let componentName:string;
43
44
    for (let i:number = 0; i < length; i++)
45
    {
46
        $element = $elements.eq(i);
47
        types = $element.attr('data-sjs-type');
48
49
        if (types === void 0)
50
        {
51
            // Create the component if there is not a 'data-sjs-type' attribute on the element.
52
            component = ComponentFactory._createComponent($element, ComponentClass, scope);
53
            list.push(component);
54
        }
55
        else
56
        {
57
            // Else if there is already a 'data-sjs-type' attribute then get the type(s).
58
            types = types.split(',');
59
            componentName = Util.getName(ComponentClass);
60
61
            // Only create the component if the component type does not already exist.
62
            if (types.indexOf(componentName) === -1)
63
            {
64
                component = ComponentFactory._createComponent($element, ComponentClass, scope);
65
                list.push(component);
66
            }
67
        }
68
    }
69
70
    return list;
71
}

53
private buildComponent(): void {
54
    if (!this.componentType) {
55
        return;
56
    }
57
    try {
58
        this.destroyComponent();
59
        // this.entry.clear();
60
        const componentFactory = this.componentFactoryResolver.resolveComponentFactory>(this.componentType);
61
        const component = this.entry.createComponent(componentFactory, 0);
62
        this.initComponent(component);
63
        this.component = component;
64
    } catch (e) {
65
        console.error('load component error.');
66
        console.error(e);
67
    }
68
}

72
$create() {
73
  // Define process dependencies with other components.
74
  // If circular depenencies are detected, the error will be repoated.
75
76
  this.registerDependency(AnimationComponent.componentTID, false);
77
}

238
function newComp(parentComp, compDef) {
239
	let comp;
240
	if (compDef[$class]) {
241
		comp = new compDef[$class];
242
		comp.model = parentComp.model;  comp.context = parentComp.context;
243
		// Object.setPrototypeOf(comp, compDef[$class]);
244
		// copy over comp default properties, should all be static
245
		for (let p in compDef) {
246
			if (p === 'extend' || p === 'match') {} // skip
247
			// else if (p === 'name') // name is treated as normal property
248
			else { comp[p] = compDef[p]; }
249
		}
250
	}
251
	else {
252
		comp = {model: parentComp.model, context: parentComp.context, apply: parentComp.apply};
253
		if (compDef.constructor.name === 'function') {
254
			Object.setPrototypeOf(comp, parentComp);
255
			// copy over comp default properties, should all be static
256
			for (let p in compDef) {
257
				// function does not support 'match' or 'extend'
258
				if (p === 'name') { comp[$name] = compDef[p]; }
259
				else { comp[p] = compDef[p]; }
260
			}
261
		}
262
		else {
263
			Object.setPrototypeOf(comp, compDef);
264
		}
265
	}
266
	return comp;
267
}

112
public create() {
113
  this.initController();
114
}

63
createComponents(components) {
64
    return Object.entries(components)
65
        .reduce((result, [name, model]) => {
66
            // eslint-disable-next-line no-param-reassign
67
            result[name] = this.createComponentObject(model);
68
            return result;
69
        }, {});
70
}

481
private createDynamicComponent(component: Type) {
482
    const factory = this.cfr.resolveComponentFactory(component);
483
    const childInjector = Injector.create({
484
        providers: [{provide: McModalRef, useValue: this}],
485
        parent: this.viewContainer.injector
486
    });
487
488
    this.contentComponentRef = factory.create(childInjector);
489
490
    if (this.mcComponentParams) {
491
        Object.assign(this.contentComponentRef.instance, this.mcComponentParams);
492
    }
493
494
    // Do the first change detection immediately
495
    // (or we do detection at ngAfterViewInit, multi-changes error will be thrown)
496
    this.contentComponentRef.changeDetectorRef.detectChanges();
497
}

11
function componentBuilder(template) {
12
    @Component({
13
        selector: 'my-component',
14
        template
15
    })
16
    class CustomComponent {
17
    }
18
19
    return CustomComponent;
20
}

191
_instantiateComponent(Component, props) {
192
  return new Component(props);
193
}