Container Nested Component Input Output Properties Interfaces in Angular

All about Container,Component and Interface in AngularJS by Sagar Jaybhay

Container Nested component and Interface in Angular

Input properties:

  1. They are used to get value from parent component and used by decorating our properties by Input() decorator for that we need to import Input from the angular core. By using Input property we are able to pass data from container to nested component.
Input Properties in Angular

Output Properties

  1. By using output properties we can able to pass user actions or user-entered values or selections from child component to parent component. The output is present in the angular core and we required event emitter for this which is also called payload event and also it will send the type of event data of particular type.
  2. Output and EventEmitter are present in the angular core.
  3. For this, you to create output property and event for emitter in the child component. Then create method and property in the parent element and assign this child event name in parent selector with the parent selector method.
  4. In Angular 2 structural directive is not applicable in the single element it throws an error like can’t have multiple template binding on a single element. We have to use custom event emitter in the selector of parent and assign function in parent to that custom event emitter in the child.
inputPropeties in code in angular

When we use 2 structural directives on the single element it throws an error so overcome this we use ng-container directive.

structural directives in Angular

Interface In Angular

To create a custom type also interface defines the contract the class who implement that interface he needs to implement the method in that interface. If you don’t use strongly typed variable then you got intellisence but if you don’t like our employee field which is having any data type so you never got intellisence for that. So chances of typographical error might be increases.

Interface in TypeScript

  • The interface is a keyword to create an interface.
  • It is common that interface should start with I letter but in angular, it’s not the case OnInt interface.
  • Interface members are public by default and don’t require access modifier. If you add you will get a compile-time error. And the error is ‘public’ modifier cannot appear on a type member.
  • A class which implements that interface needs to provide the implementation. But if you declared one the field is optional by using? this operator then no implementation is valid.

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *