@Input() Decorator is used to data transfer from parent component to the child component.
Suppose, there are two components App component is a parent component and UserList is a child component.
Now, you have to pass value of userPermission variable from “App Component” to “UserList Component” component.
Suppose you have to defined userPermission as a Boolean variable which has value true in the app.component.ts file.
Step1:- define userPermission in the app.component.ts file
import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'] }) export class AppComponent { userPermission:boolean=true; }
Now add the child component selector like app-user-list into the parent component html file (app.component.html).
<h1>Employees Management Tools</h1> <app-user-list [permission]="userPermission"></app-user-list>
Step2:- Now, add the @input Decorator in the child component “userList” and defined the permission variable, which is used in app.component.ts file
import { Component, OnInit, Input } from '@angular/core'; @Component({ selector: 'app-user-list', templateUrl: './user-list.component.html', styleUrls: ['./user-list.component.scss'] }) export class UserListComponent implements OnInit { @Input() permission:boolean; constructor() { } ngOnInit(): void { } }
Now, Add the condition based on permission in the user-list.component.html file.
<div *ngIf="permission"> User allows to show this page. </div> <div *ngIf="!permission"> User does not allow to show this page. </div>
Now, if user set userPermission variable value true then show output on the browser “User can see the details.”
if user set userPermission variable value false then show output on the browser ” You have not permission to see the records”