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.
Define a variable “welcomeNote” inside app.component.ts file.
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>
In header.component.ts file include Input in @angular/core and add title variable in @Input decorator
Use this variable (title) in header.component.html
<p> to </p>