Pass Data from Component to Component in Angular

This blog explains how to pass one component to another component using a decorator.

Introduction 

 

This post explains how to pass one component to another component using a decorator. 

 

How to pass data from the Parent Component to the Child component

Angular provides the Decorator, @Input().  By using this decorator, we can pass data from the Parent component to the Child component.

 

How to pass data from the Child component to the Parent Component

Angular provides the Decorator, @Output(). By using this decorator, we can pass data from the child component to the parent component.

 

Adding a Class dynamically

NgClass is a directive where we can set classes dynamically.

 

Below is a screenshot in which there is a sample Form to add values. Added values will display in the card.

 

 

 

I have created Forms and Cards with the help of Bootstrap. In this scenario, I am covering the few topics, including @input(), @Output() and [ngClass] with Form validation.

 

 

  

Step 1: Create an Angular App and Install Bootstrap

 

Create a component called register (ng g c register)

 

There are two types forms Template-Driven (TD) and Reactive Form. I have created a Template-driven form.

 

register.component.html 

<div class="card shadow-lg p-3 mb-5 bg-white rounded">
<div class="card-header">
Register Here
</div>
<div class="card-body">
<form (ngSubmit)="SubmitForm(regisForm)" #regisForm="ngForm">
<div class="form-group row">
<label for="FirstName" class="col-sm-5 col-form-label">First Name</label>
<div class="col-sm-7">
<input type="text"
ngModel
name="FirstName"
#name="ngModel"
required
class="form-control form-control-sm">
<small class="form-text text-muted"
*ngIf="!name.valid && name.touched">
First Name is Required</small>
</div>
</div>
<div class="form-group row">
<label for="LastName" class="col-sm-5 col-form-label">Last Name</label>
<div class="col-sm-7">
<input type="text"
name="LastName"
ngModel
#LastName="ngModel"
required
class="form-control form-control-sm">
<small class="form-text text-muted"
*ngIf="!LastName.valid&&LastName.touched">
Last Name is Required</small>
</div>
</div>
<div class="form-group row">
<label for="Mobile" class="col-sm-5 col-form-label">Mobile</label>
<div class="col-sm-7">
<input type="number"
name="Mobile"
ngModel
#Mobile="ngModel"
required
class="form-control form-control-sm" aria-describedby="emailHelp">
<small class="form-text text-muted"
*ngIf="!Mobile.valid && Mobile.touched">
Mobile Number is Required</small>
</div>
</div>
<div class="form-group row">
<label for="Location" class="col-sm-5 col-form-label">Location</label>
<div class="col-sm-7">
<select class="form-control form-control-sm"
name="Location"
ngModel
#location="ngModel">
<option *ngFor="let loc of locations" value="{{loc}}">{{loc}}</option>
</select>
</div>
</div>
<button type="submit" class="btn btn-primary btn-sm" [disabled]="!regisForm.valid">Submit</button>
<button type="reset" class="btn btn-danger btn-sm ml-2">Reset</button>
</form>
</div>
</div>

  

register.component.css

 

Below is the class for validation border 

input.ng-invalid.ng-touched{
border:1px solid red;
}

 

register.component.ts

 

Below is an example where I created a variable called tableDataValues with the Output decorator. Whatever we will submit Form will store into tableDataValues.

import { Component, OnInit, Output ,EventEmitter} from '@angular/core';
import { NgForm } from '@angular/forms';
@Component({
selector: 'app-register',
templateUrl: './register.component.html',
styleUrls: ['./register.component.css']
})
export class RegisterComponent implements OnInit {
@Output() tableDataValues=new EventEmitter<string>();
constructor() { }
ngOnInit() {
}
locations = ['Bangalore', 'Kalaburagi', 'Solapur'];
SubmitForm(regisForm:NgForm){
this.tableDataValues.emit(regisForm.value);
}
}

 

Step 2: Create a component called register-data (ng g c register-data)

 

register-data.component.html

<div class="card shadow p-2 mb-3 rounded mt-1"
[ngClass]="(item.Location=='Bangalore')?'text-white bg-warning':'text-white bg-success'"
>
<div class="card-header">
Users Account
<button type="button" class="close" aria-label="Close" (click)="deleteCard(item.Mobile)">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="card-body">
<h5 class="card-title">{{item.FirstName | titlecase}}</h5>
<p class="card-text">
LastName: {{item.LastName}}
Mobile: {{item.Mobile}}
Location:{{item.Location}}
</p>
</div>
</div
>

register-data.component.ts

 

Below is example where I created a variable called item with an Input decorator

import { Component, OnInit, Input, EventEmitter, Output } from '@angular/core';
@Component({
selector: 'app-register-data',
templateUrl: './register-data.component.html',
styleUrls: ['./register-data.component.css']
})
export class RegisterDataComponent implements OnInit {
@Input() item;
@Output() deleteItem = new EventEmitter<string>();
constructor() { }
ngOnInit() {
}
deleteCard(val) {
this.deleteItem.emit(val);
}
}

 

NgClass is a directive where we can set its class dynamically.

 

Angular provided many ways to set it dynamically. Below is the small example

We are setting it so that if the selected location is Bangalore, the card will display an orange color, or else displaying a success message.

[ngClass]="(item.Location=='Bangalore')?'text-white bg-warning':'text-white bg-success'"

 

app.component.html

 

The app component is a root component generated by Angular itself. We have added app-register component in app.component.html with the properties tableDataValues. Data will return from the app-register component by submitting values. It will hold and pass to a method that is submitted($event). We also have added an app-register-data component with a properties item.

<div class="container">
<div class="row">
<div class="col-md-4">
<app-register (tableDataValues)="submitted($event)"></app-register>
</div>
<div class="col-md-8">
<div class="row">
<div class="col-md-4" *ngFor="let items of tableData">
<app-register-data [item]="items" (deleteItem)="DeletedItem($event)"></app-register-data>
</div>
</div>
</div>
</div>
</div>

app.component.ts

import { Component } from '@angular/core';
import { NgForm } from '@angular/forms';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'demo';
submitted(event){
this.tableData.push(event);
}
DeletedItem(values){
for(var i = this.tableData.length - 1; i >= 0; i--) {
if(this.tableData[i].Mobile === values) {
this.tableData.splice(i, 1);
}
}
}
tableData=[
{
FirstName:"Gururaj",
LastName:"Jewargi",
Mobile:[phone],
Location:"Bangalore"
},
{
FirstName:"RAju",
LastName:"Jewargi",
Mobile:[phone],
Location:"Gulbarga"
},
{
FirstName:"Guru",
LastName:"Jewargi",
Mobile:[phone],
Location:"Kalaburagi"
}
]
}

Step 3 : Run the App by ng serve command

 

Fill the required details and click on submit.

 

 

 

If you want to delete a card, click on the close icon.