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

Every line of 'create new component in angular 6' code snippets is scanned for vulnerabilities by our powerful machine learning engine that combs millions of open source libraries, ensuring your JavaScript code is secure.

All examples are scanned by Snyk Code

By copying the Snyk Code Snippets you agree to
this disclaimer
25public 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}
Important

Use secure code every time

Secure your code as it's written. Use Snyk Code to scan source code in minutes – no build needed – and fix issues immediately. Enable Snyk Code

35public static create ($elements:JQuery, ComponentClass:any, scope:DisplayObjectContainer = null):Array<any>
36{
37 const list:Array<DisplayObject> = [];
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}
53private buildComponent(): void {
54 if (!this.componentType) {
55 return;
56 }
57 try {
58 this.destroyComponent();
59 // this.entry.clear();
60 const componentFactory = this.componentFactoryResolver.resolveComponentFactory<IDynamicComponent<any>>(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}
238function 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}
112public create() {
113 this.initController();
114}
63createComponents(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}
481private createDynamicComponent(component: Type<T>) {
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}
11function 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}

Related snippets