Have you ever had the need two components to communicate each other? Of course you had! I bet that when you hear components communication or components interaction, you automatically think of @input @output decorators. Say that we have two components, parent and child. You want the parent component to interpolate on its template a property from the child component. How can we do this?
What exportAs does?A class has various access modifiers (private, public, protected etc.) and the instances of this class are affected by those modifiers. Think of public and private. If we have a class with two properties, the instance of this class can use only the public ones. The instance with name parent can not use the property _anotherProperty because it's private. Using the exportAs in your component, you are exporting all the public properties and methods How to use the exportAsBelow is a list of some of the very well known component metadata:
1) Add the exportAs property on the component decorator and add a name of your desire. The name is meaningful as you will got access to the component via this name 2) Create a template reference variable on the component's selector The #childinstance is the template reference variable. In essence, with hash (#) we declare variable on the template.
On this variable, we assign the name child which is the name we chose when we decided to export the component. We can now access the properties via the variable we've just created. Find here a working example https://stackblitz.com/edit/parent-child-exportas
Comments
|
AuthorI am an Angular GDE, content creator who loves sharing knowledge TagsAll Angular Angularjs General Graphql Ionic Javascript .net Nodejs Typescript |