Components

Question 1

What are Components

Answer 1

Components are the main building block for Angular applications.

Question 2

What are the pieces of Components

Answer 2

An HTML template that declares what renders on the page
A Typescript class that defines behavior
A CSS selector that defines how the component is used in a template
Optionally, CSS styles applied to the template

Question 3

To create Component with Angular CLI

Answer 3

ng generate component name

Question 4

CSS Selector

Answer 4

Every component requires a CSS Selector

Instructs Angular to instantiate this component wherever it finds the corresponding tag in template HTML.

Question 5

Component’s Template

Answer 5

A template is a block of HTML that tells Angular how to render the component in your application.

A template can be defined in 2 ways:
by referencing an external file,
or by directly within the component.

Question 6

Component’s Style

Answer 6

Styling can be referenced in an external file using styleUrls:,
or directly within the component using styles:

Question 7

Lifecycle

Answer 7

Components start when Angular instantiates the class and its child views.

The lifecycle continues with change detection. Angular checks to see when data-bound properties change. It updates both the view and the component instance as needed.

The lifecycle ends when Angular destroys the component instance and removes its rendered template from the DOM.

Question 8

@Input decorator

Answer 8

@Input() lets a parent component update data in the child component.

Creates a variable that will take as input what it passed to it using the following syntax:

import { Component, Input } from '@angular/core'; // First, import Input
export class ItemDetailComponent {
  @Input() item = ''; // decorate the property with @Input()
}

in item-detail.component.html

<p>
Today's item: {{item}}
</p>

in app.component.html

In the parent component, designate a value for currentItem
in app.component.ts
export class AppComponent {
  currentItem = 'Television';
}

Question 9

Input setter

Answer 9

Setters work with getters on Input variables to manipulate the input from a parent component

ex.
export class NameChildComponent {
  @Input()
  get name(): string { return this._name; }
  set name(name: string) {
    this._name = (name && name.trim()) || '';
  }
  private _name = '';
}

Question 10

ngOnChanges() for inputs

Answer 10

This approach may be preferred to setters when watching multiple, interacting input properties.

ex. 
export class VersionChildComponent implements OnChanges {
  @Input() major = 0;
  @Input() minor = 0;
  changeLog: string[] = [];

  ngOnChanges(changes: SimpleChanges) {
    const log: string[] = [];
    for (const propName in changes) {
      const changedProp = changes[propName];
      const to = JSON.stringify(changedProp.currentValue);
      if (changedProp.isFirstChange()) {
        log.push(`Initial value of ${propName} set to ${to}`);
      } else {
        const from = JSON.stringify(changedProp.previousValue);
        log.push(`${propName} changed from ${from} to ${to}`);
      }
    }
    this.changeLog.push(log.join(', '));
  }
}

Question 11

EventEmitter for parent-child interaction

Answer 11

The child component exposes an EventEmitter property with which it emits events when something happens. The parent binds to that event property and reacts to those events.

The EventEmitter is usually adorned with the @Output decorator

Question 12

local variable for parent-child interaction

Answer 12

A parent component cannot use data binding to read child properties or invoke child methods. You can do both by creating a template reference variable for the child element and then reference that variable within the parent template.

You can place a local variable, #localName (using the ‘#’) on the tag representing the child component. That gives you a reference to the child component and the ability to access any of its properties or methods from within the parent template.

Question 13

Drawbacks of local variables for parent-child interaction

Answer 13

You can’t use the local variable technique if the parent component’s class relies on the child component’s class. The parent-child relationship of the components is not established within each components respective class with the local variable technique. Since the class instances are not connected to one another, the parent class cannot access the child class properties and methods.

Question 14

@ViewChild() for parent-child interaction

Answer 14

First, you have to import references to the ViewChild decorator and the AfterViewInit lifecycle hook.

Next, inject child component using @ViewChild(ChildComponent)

The ngAfterViewInit() lifecycle hook is an important wrinkle. The child component isn’t available until after Angular displays the parent view.

Then Angular calls the ngAfterViewInit lifecycle hook at which time it is too late to update the parent view’s display. Angular’s unidirectional data flow rule prevents updating the parent view’s in the same cycle. The application has to wait one turn before it can display view.

Question 15

Use a service for parent-child interaction

Answer 15

A parent component and its children share a service whose interface enables bi-directional communication within the family.

Question 16

@Output decorator

Answer 16

@Output() lets the child send data to a parent component.