The article Everything you need to know about the ExpressionChangedAfterItHasBeenCheckedError error explains this behavior in great details Cause Your problem is very similar to this one but instead of updating parent property through a service you’re updating it through synchronous event broadcasting. Here is the quote from the linked answer: During digest cycle Angular performs … 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
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
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 is the projectableNodes parameter for the vcRef.createComponent method createComponent<C>(componentFactory: ComponentFactory<C>, index?: number, injector?: Injector, projectableNodes?: any[][], ngModule?: NgModuleRef<any>): ComponentRef<C>; You can use it to dynamically inject one component into another. Let’s say we have the following component @Component({ selector: ‘card’, template: ` <div class=”card__top”> <h2>Creating a angular2 component with ng-content dynamically</h2> </div> <div class=”card__body”> … Read more
You can use a BehaviorSubject for communicating between different components throughout the app. You can define a data sharing service containing the BehaviorSubject to which you can subscribe and emit changes. Define a data sharing service import { Injectable } from ‘@angular/core’; import { BehaviorSubject } from ‘rxjs’; @Injectable() export class DataSharingService { public isUserLoggedIn: … 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
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
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