intial description
Introduction
Let suppose we have a parent component (AppComponent) and a child component (HeaderComponent). We want to declare a variable in AppComponent and use it in HeaderComponent. Let’s see how we will achieve this.
Step 1
Define a variable “welcomeNote” inside app.component.ts file.
App.compoment.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
//declare a variable welcomeNote having title and appName
welcomeNote = {
initial: "Welcome",
appName: "My Test App"
}
}
Step 2
In app.component.html add reference of header component selector (app-header) and input a tag “title” having welcomeNote variable. You can take any name. Best is to take variable name (welcomeNote) as a tag name.
<app-header [title] = "welcomNote"></app-header>
Step 3
In header.component.ts file include Input in @angular/core and add title variable in @Input decorator
import { Component, OnInit, Input } from '@angular/core';
@Component({
selector: 'app-header',
templateUrl: './header.component.html',
styleUrls: ['./header.component.scss']
})
export class HeaderComponent implements OnInit {
// This decorator recieves input parameter passed from parent component
@Input() title;
constructor() { }
ngOnInit() {
}
}
Step 4
Use this variable (title) in header.component.html
<p> to </p>
Output
