The complete book on angular 11 - Chapter 3 How Angular Works

 Chapter 3 How Angular Works

1.

We’ve provided the entire, completed application in the code download folder under

how-angular-works/inventory-app.

2.

The @Component is called a decorator.

The Component controller is defined by a class.

<h1>{{ product.name }}</h1> //Using the {{…}} syntax is called template binding.

What’s neat about template binding is that the code inside the brackets is an

expression. That means you can do things like this:

• {{ count + 1 }}

• {{ myFunction(myArguments) }}

3.

When we use products-list we’re using a key feature of Angular components:

inputs and outputs:

<products-list

[productList]="products" <!-- input -->

(onProductSelected)="productWasSelected($event)"> <!-- output -->

</products-list>

The [squareBrackets] pass inputs and the (parentheses) handle outputs.

Data flows in to your component via input bindings and events flow out of your

component through output bindings.

(onProductSelected)="productWasSelected($event)": We’re saying that we want to listen to the onProductSelected output from the

ProductsList component.

import {

Component,

EventEmitter,

Input,

Output

} from '@angular/core';

import { Product } from '../product.model';

/**

* @ProductsList: A component for rendering all ProductRows and

* storing the currently selected Product

*/

@Component({

selector: 'products-list',

templateUrl: './products-list.component.html'

})

export class ProductsListComponent {

/**

* @input productList - the Product[] passed to us

*/

@Input() productList: Product[];

/**

* @output onProductSelected - outputs the current

* Product whenever a new Product is selected

*/

@Output() onProductSelected: EventEmitter<Product>;

we can listen to an event by using the (output)="action" syntax.

4.

<my-component [shortName]="myName" [oldAge]="myAge"></my-component>

@Input("shortName") name: string;

@Input("oldAge") age: number;

5.

To create a custom output event we do three things

1. Specify outputs in the @Component configuration

2. Attach an EventEmitter to the output property

3. Emit an event from the EventEmitter, at the right time

An EventEmitter is an object that helps you implement the Observer

Pattern. That is, it’s an object that will:

1. maintain a list of subscribers and

2. publish events to them.

Here’s a short and sweet example of how you can use EventEmitter

let ee = new EventEmitter(); 

ee.subscribe((name: string) => console.log(Hello ${name})); 

ee.emit(“Nate”);

// -> “Hello Nate”

6.

The line [class.selected]="isSelected(myProduct)" is a fun one: Angular allows

us to set classes conditionally on an element using this syntax. This syntax says

“add the CSS class selected if isSelected(myProduct) returns true.”

7.

@HostBinding('attr.class') cssClass = 'item';

we’re saying that we want to attach the CSS class item to the host element.

TODO Built-in Directives