Angular apps are made of components, a tree of components. Because components are organized in a tree structure, as each component is rendered, the subordinate components are rendered recursively

Each component:

  1. Component annotations (@Component)
    • Selector: Tells Angular which HTML element to match
    • Template: Used to define views
  2. view
  3. The controller

Input and output

The component annotation

Core Angular feature: input/output

  • The square brackets[]: Passes input. Data flows into your component through input bindings
  • parentheses(a): Processes output. Events flow out of your component through output bindings
@Component({
  selector: 'inventory-app',
  template: ` 
      
 
        
        
      
 `
})
Copy the code

  1. In the products-List component, set the input named productList.

    Products: You want to set the input to the value of the Products expression, which is this.products in the InventoryApp class

  2. (onProductSelected) : The name of the output we want to listen for

    ProductWasSelected ($event) : method we want to call when there is new input

    $event is a special variable here that represents the output

ProductList and onProductSelected are variables in the products-list component

Products and productWasSelected are the variables \ functions of the current component

Product Component List

Component input

The Inputs configuration specifies which parameters a component wants to receive

@Input() name:string
Copy the code

Component output

To pass data from a component, use the output binding, written as: (output)=”action”

In a view, you can use the (output)=”action” syntax to listen for events

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-counter',
  template: ` {{value}}   `,
  styleUrls: ['./counter.component.css']})export class CounterComponent implements OnInit {
    value: number;

  constructor() { 
      this.value = 1;
  }

  ngOnInit() {
  }

  increase() {
      this.value++;
      return false;
  }

  decrease() {
      this.value--;
      return false; }}Copy the code

(Click), mouseDown, and so on are built-in button events and can also trigger custom events

EventEmitter Event trigger

EventEmitter is just an object that helps you implement the observer mode. It’s an object that manages a series of subscribers and publishes events to them

let ee = new EventEmitter();
ee.subscribe((name:string) = > console.log(`Hello ${name}`));
ee.emit("Nate");
// --> "Hello Nate"
Copy the code

Angular automatically subscribs to events when assigning an EventEmitter to an output