Note: EntryConponent is Deprecated from Angular 9.0.0 See the angular docs form more details. This is for dynamically added components that are added using ViewContainerRef.createComponent(). Adding them to entryComponents tells the offline template compiler to compile them and create factories for them. The components registered in route configurations are added automatically to entryComponents as well … Read more
You could add dummy attributes header and body as opposed to template references (#header, #body). And transclude using ng-content with select attribute like select=”[header]”. app.comp.html <app-child> <div header >This should be rendered in header selection of ng-content</div> <div body >This should be rendered in body selection of ng-content</div> </app-child> child.comp.html <div class=”header-css-class”> <ng-content select=”[header]”></ng-content> </div> … Read more
These are the 5 steps I perform when I get such an error. Are you sure the name is correct? (Also check the selector defined in the component) Declare the component in a module? If it is in another module, export the component? If it is in another module, import that module? Restart the cli? … Read more
There was a bug, but it was fixed in the meantime. :host { } works fine now. Also supported are :host(selector) { … } for selector to match attributes, classes, … on the host element :host-context(selector) { … } for selector to match elements, classes, …on parent components selector /deep/ selector (alias selector >>> selector … Read more
You can do this by using @ViewChild for more info check this link With type selector child component @Component({ selector: ‘child-cmp’, template: ‘<p>child</p>’ }) class ChildCmp { doSomething() {} } parent component @Component({ selector: ‘some-cmp’, template: ‘<child-cmp></child-cmp>’, directives: [ChildCmp] }) class SomeCmp { @ViewChild(ChildCmp) child:ChildCmp; ngAfterViewInit() { // child is set this.child.doSomething(); } } With … Read more
No! There is no command which will change the name of all files generated using the component create command. So created ts, html, css/scss, .spec.ts files need to be manually renamed/edited. I am a frequent user of angular cli and I think this would be a nice-to-have command as some time we just create angular … Read more
Update – Newest Way Don’t do it, if you can avoid it. As Devon Sans points out in the comments: This feature will most likely be deprecated. Last Update From Angular 4.3.0 till even now (Angular 12.x), all piercing css combinators were deprecated. Angular team introduced a new combinator ::ng-deep as shown below, DEMO : … Read more
Instead of injecting ElementRef and using querySelector or similar from there, a declarative way can be used instead to access elements in the view directly: <input #myname> @ViewChild(‘myname’) input; element ngAfterViewInit() { console.log(this.input.nativeElement.value); } StackBlitz example @ViewChild() supports directive or component type as parameter, or the name (string) of a template variable. @ViewChildren() also supports … Read more
The hidden property can be used for that [hidden]=”!myVar” See also https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden issues hidden has some issues though because it can conflict with CSS for the display property. See how some in Plunker example doesn’t get hidden because it has a style :host {display: block;} set. (This might behave differently in other browsers – I … Read more