Angular Basics — 1

1. Parent and Child Components
2. @Input()
3. @Output()
4. @ViewChild()
Example 1: Access Child Component
Example 2: Access Child Properties
Example 3: Access HTML Element
Example 4: Access ng-template

1. Parent and Child Components

A component becomes a Parent when it uses another component inside its HTML.

Parent Component HTML

<h1>Parent Component</h1>
<app-child></app-child>

Child Component ts

@Component({
  selector: 'app-child',
  template: `<p>Child Component</p>`
})
export class ChildComponent {}

Relationship:

ParentComponent
      |
      v
ChildComponent

Note: This is different from extends.

export class ChildComponent extends BaseComponent {}

This is class inheritance, not Angular Parent-Child communication.

2. @Input()

Used to send data from Parent → Child.

Parent Component

// ts
export class ParentComponent {
  userName = 'Kishore';
}

<!-- html -->
<app-child [name]="userName"></app-child>

Child Component

// ts
import { Input } from '@angular/core';
export class ChildComponent {
  @Input()
  name!: string;
}

<!-- Html -->
<p>{{ name }}</p>

Output:

Kishore

Flow:

Parent ---> Child

3. @Output()

Used to send events from Child → Parent.

Child Component

// ts
import { Output, EventEmitter } from '@angular/core';
export class ChildComponent {
  @Output()
  save = new EventEmitter<string>();
  onSave() {
    this.save.emit('Data Saved');
  }
}

<!-- html -->
<button (click)="onSave()">
  Save
</button>

Parent Component

<!-- html -->
<app-child
  (save)="handleSave($event)">
</app-child>

// ts
export class ParentComponent {
handleSave(message: string) {
    console.log(message);
  }
}

Output:

Data Saved

Flow:

Get Eoin Kishore’s stories in your inbox
Join Medium for free to get updates from this writer.
Remember me for faster sign in
Child ---> Parent

4. @ViewChild()

Used to get a direct reference to:

• Child Component
• HTML Element
• ng-template

Think:

Parent gets access to Child itself

Example 1: Access Child Component

Child Component

export class ChildComponent {
showMessage() {
    console.log('Hello from Child');
  }
}

Parent HTML

<app-child></app-child>

Parent TS

import { ViewChild } from '@angular/core';
export class ParentComponent {
  @ViewChild(ChildComponent)
  child!: ChildComponent;
  ngAfterViewInit() {
    this.child.showMessage();
  }
}

Output:

Hello from Child

Example 2: Access Child Properties

Child

export class ChildComponent {
name = 'Kishore';
}

Parent

@ViewChild(ChildComponent)
child!: ChildComponent;
ngAfterViewInit() {
  console.log(this.child.name);
}

Output:

Kishore

Example 3: Access HTML Element

HTML

<input #userInput>

TS

import { ViewChild, ElementRef } from '@angular/core';
export class ParentComponent {
  @ViewChild('userInput')
  input!: ElementRef;
  ngAfterViewInit() {
    this.input.nativeElement.focus();
  }
}

Purpose:

Focus input
Read value
Manipulate DOM

Example 4: Access ng-template

HTML

<ng-template #loading>
  Loading...
</ng-template>

TS

import { ViewChild, TemplateRef } from '@angular/core';
export class ParentComponent {
  @ViewChild('loading')
  loadingTemplate!: TemplateRef<any>;
}

Simple words
Using @ViewChild, we can access HTML elements in our own template from TypeScript. We can also access a child component instance and call its public methods and properties. However, we cannot directly access the child component's internal HTML elements unless the child component exposes them through its own methods or properties.