; If All option is checked and user click any other checkbox than All then All and clicked checkbox shall be deselected. I want my datasource to refresh to show the changes they made. 1.Simply copy and paste the file mat-select-checkbox-changes.directive.ts Update. I just wanted to propose yet another method. I.e. Have updated the logic to render the component outside *ngIf, there by ViewChild was able to successfully initialize the element. it's a common misconception to miss a few syntaxes in writing the code , one such popular mistake everyone tries to make is not using * before ngIf , which when used makes angular compiler to read ngIf as template reference variable and checks for local reference for the variable which wont be found in the file. angular Specifically, I've tried to "put a component inside another component" like this: Angular Angular when the component can be given a name e.g I can then reference it as follows: @ViewChild('compID') test: CustomComponent angular I highly recommend starting with the OP's self response first: properly think about what can be done in the constructor vs what should be done in ngOnChanges().. NOTE: There are many different answers here, and most have been valid at one time or another. However, we should not use DOM manipulation (document.xyz()) in angular. Check your email for updates. Thanks for contributing an answer to Stack Overflow! Hence ViewChild was unable to initialize the required element. Create issue on GitHub if you found a bug. ViewChild Angular this.submitted = false; I would like to know how i can get a reference to these components using @viewchild syntax or any other means when the number of these components can vary . If i understand you properly you are asking about ChangeDetectionStrategy Angular has two options enum ChangeDetectionStrategy { OnPush: 0 Default: 1 } If you use default it simply will "re-render" you view after each event such a click. angular @LucaEffeFederzoni I believe it works regardless of your hierarchy, as long as you mark each div appropriately. Angular but how can get id of selected option value. @LucaEffeFederzoni I believe it works regardless of your hierarchy, as long as you mark each div appropriately. angular : any; static: boolean; }) Now, the interesting part is the static value, which by definition says @GregorDoroschenko I was trying to use a model with additional information about the file and I had to do this to get it to work: const invFormData: FormData = new FormData(); invFormData.append('invoiceAttachment', invoiceAttachment, invoiceAttachment.name); invFormData.append('invoiceInfo', JSON.stringify(invoiceInfo)); The Name your Form something like this