Angular - Using Local Variable

Parent components can get complete access to the child component throughlocal variable. However, parent component gets access to the child component in its template only.

Example - Usage of Local Variable to pass data

Let us create two component, ParentCounterComponent and ChildCounterComponent to understand the concept. The purpose of the ParentCounterComponent is to provide counter functionality through two button, increment and decrement button. The increment button will increment the counter and the decrement button will decrement the counter. Parent component will get the increment and decrement functionality from child component instead of implementing itself.

Step 1: Create child component, ChildCounter Component using angular CLI as shown below −

ng generate component ChildCounter
CREATE src/app/child-counter/child-counter.spec.ts (597 bytes)
CREATE src/app/child-counter/child-counter.ts (224 bytes)
CREATE src/app/child-counter/child-counter.css (0 bytes)
CREATE src/app/child-counter/child-counter.html (29 bytes)

Step 2: Declare a variable counter and two methods inc() and dec() to increment and decrement the counter respectively inside the child component −

child-counter.ts

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

@Component({
   selector: 'app-child-counter',
   imports: [],
   templateUrl: './child-counter.html',
   styleUrl: './child-counter.css',
})
export class ChildCounter {
   counter: number = 0
   // increment and decrement counter  
   inc() { this.counter++ }
   dec() { this.counter-- }
}

Step 3: Next, open parent component's template file, app.html and add child component along with an id, #child to access the child component.

<app-child-counter #child></app-child-counter>

Step 4: Next, add two buttons and bind click events with child component's inc() and dec() methods accessed through child identifier. Also, show the current value of counter using child identifier.

app.html

<p>counter: {{child.counter}}</p>

<button (click)="child.inc()">Increment</button>
<button (click)="child.dec()">Decrement</button>

<app-child-counter #child></app-child-counter>
<router-outlet />

Step 5: Next, include the given code inside app.ts file.

app.ts

import { Component, signal } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { ChildCounter } from './child-counter/child-counter';

@Component({
   selector: 'app-root',
   imports: [RouterOutlet, ChildCounter],
   templateUrl: './app.html',
   styleUrl: './app.css'
})
export class App {
   protected readonly title = signal('expense-manager');
}

Output

Step 6: Finally, run the application and check whether the counter is working fine.