app.module.ts file
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { ChildComponent } from './child/child.component';
@NgModule({
declarations: [
AppComponent,
ChildComponent
],
imports: [
BrowserModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
app.component.html file
<h2>Parent Component</h2>
<app-child [loggedIn]="userLoggedIn"></app-child>
app.component.ts file
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
userLoggedIn = true;
}
child.component.html file
<h3>Child Component</h3>
<p *ngIf="loginFlag">Welcome back</p>
<p *ngIf="!loginFlag">Please be login</p>
child.component.ts file
import { Component, OnInit, Input } from '@angular/core';
@Component({
selector: 'app-child',
templateUrl: './child.component.html',
styleUrls: ['./child.component.css']
})
export class ChildComponent implements OnInit {
@Input('loggedIn') loginFlag: boolean;
constructor() { }
ngOnInit() {
}
}