Detailed explanation of the input attributes and output attribute instances of Angular4

This article describes the input properties and output properties of Angular4. Share it for your reference, as follows:

Angular4 input properties

Input properties are usually used to pass information to children.

For example, we pass the stock code to the child component in the parent component. We call the child component here app-order

First declare the value that needs to be passed in by the parent component.

...
@Input()
stockCode: string
@Input()
amount: string
...

<p>Here are the subcomponents</p>
<p>The stock code is{{stockCode}}</p>
<p>The total number of stocks is{{amount}}</p>

Then we need to pass the value to the child component in parent component()

...
stock: string
...

<input type="text" placeholder="Please enter the stock code" [(ngModel)]="stock">
<app-order [stockCode]="stock" [amount]="100"></app-order>

Here we use Angular's two-way data binding to bind the user input value to the stock in the controller. Then pass it to the subcomponent, which is displayed on the page after receiving it.

Angular4 output properties

Output properties are required when a child component needs to pass information to the parent component.

Let me give you a chestnut: When we obtain the real-time price of stocks from stock exchanges, we hope that this information can be obtained from the outside. For convenience, we simulate the real-time stock price here by a random number. We call the child component here

Use EventEmitter to emit events from child components

export class PriceQuoteComponent implements OnInit{
 stockCode: string = 'IBM';
 price: number;
 //Send events using EventEmitter //Generics refer to what type of event is transmitted outward //priceChange is the event name @Output()
 priceChange:EventEmitter<PriceQuote> = new EventEmitter();
 constructor(){
  setInterval(() => {
   let priceQuote = new PriceQuote(, 100*());
    = ;
   //Speed ​​event   (priceQuote);
  })
 }
 ngInit(){
 }
}
//Stock information category//stockCode is the stock code, lastPrice is the stock priceexport class PriceQuote{
 constructor(public stockCode:string,
    public lastPrice:number
 )
}

<p>
 Here is the quote component
</p>
<p>
 The stock code is{{stockCode}}
</p>
<p>
 The stock price is{{price | number:'2.2-2'}}
</p>

Then we receive the event in the parent component

<app-price-quote (priceChange)="priceQuoteHandler($event)"></app-price-quote>
<div>
 This is outside the quotation component， The stock code is{{}}，
 The stock price is{{ | number:'2.2-2'}}
</div>

Event binding is the same as native event binding, both put the event name in ().

export class AppComponent{
 priceQuote:PriceQuote = new PriceQuote('', 0);
 priceQuoteHandler(event:PriceQuote){
   = event;
 }
}

The event type here is the type of event passed by the child component.

Simply put, the child component emits the event priceChange through emit and passes the value out. The parent component will trigger the priceChange event when using the child component and receives the value.

For more information about AngularJS, readers who are interested in view the topic of this site:Summary of AngularJS command operation skills》、《AngularJS Introduction and Advanced Tutorial"and"AngularJS MVC architecture summary》

I hope this article will be helpful to everyone's AngularJS programming.