Last chapter we have discussed how we can share data between two unrelated components using behavioral subjects in Angular 8. Today I am going to explain how you can make an interaction between parent and child component using Angular.

Before moving forward, I will generate one component in my flower store angular app. Flower store is the app we used to demonstrate the angular concept talked in series of chapters in this blog. 

To generate the component, please run below ng CLI command in your command prompt. 

ng g c flower-card

Above command will generate the flower-card.component.ts and corresponding html and CSS files as below.

<h1>Welcome to my flower store</h1>

    <div *ngFor="let flower of myFlowerList;trackBy:trackFlowers">
        <!-- <p-card header="{{flower.name}}"  [style]="{width: '360px','float':'left','margin-bottom': '2em','margin-right': '2em','background-color':'light-pink'}" styleClass="p-card-shadow">
                <img alt="Card" width="100" height="100" src="assets/stock/{{flower.name}}.jpg">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt
                quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque quas!</p>
                <p-checkbox name="flower" [style]="{'margin-top': '2em'}" value="{{flower.name}}" label="Order Now" [(ngModel)]="selectedFlowers"></p-checkbox>
             
            </p-card> -->
    </div>

    <div>Your search text is: {{searchText}}</div>

    <ul>
        <li *ngFor="let selectedFlower of selectedFlowers">
            <input id="select-user" type="checkbox" (change)="onCheckboxChange(selectedFlower,$event)"> {{selectedFlower}}

        </li>
    </ul>

I am going to replace commented lines by adding selected tags of flower-card component and I am going to move card displaying logic in to flower-card.component.html.

<h1>Welcome to my flower store</h1>

    <div *ngFor="let flower of myFlowerList;trackBy:trackFlowers">
      <flower-card></flower-card>
    </div>

    <div>Your search text is: {{searchText}}</div>

    <ul>
        <li *ngFor="let selectedFlower of selectedFlowers">
            <input id="select-user" type="checkbox" (change)="onCheckboxChange(selectedFlower,$event)"> {{selectedFlower}}

        </li>
    </ul>

<flower-card> is a selector tag in the flower-card component file. Below is the flower-card.component.ts file code for you to understand.

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'flower-card', // selector 
  templateUrl: './flower-card.component.html',
  styleUrls: ['./flower-card.component.scss']
})
export class FlowerCardComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }
}

Now if I run my app you will see below screen because I still did not add any codes to flower-card.component.html file to shows flowers as a card.

Pass data between parent component to child component in Angular

Now let’s focus on how to pass data from parent component (landing.component.ts) to child component (flower-card.component.ts). 

Now my flower array is defined inside the parent component and I am going to display data in child component. Now I must find a way to transfer data from parent to child component. 

In this case, we send the data from the parent component to the child component using an attribute. This attribute can then be accessed within the child component using the @input decorator.

Properties I need to pass from parent to child are only title or name of the flower since I used dummy text to display description.

I am using the title to read the image also. 

Now let us check how we can bind the attributes to child component from parent component below. There are two ways you can bind data.

<flower-card title="{{flower.name}}"></flower-card>

OR

<flower-card [title]="flower.name"></flower-card>

You can bind another attribute like description as below.

<flower-card [title]="flower.name" [description]="flower.description"></flower-card>

<h1>Welcome to my flower store</h1>

    <div *ngFor="let flower of myFlowerList;trackBy:trackFlowers">
      <!-- <flower-card title="{{flower.name}}"></flower-card> -->
      <flower-card [title]="flower.name"></flower-card>
   </div>

    <div>Your search text is: {{searchText}}</div>

    <ul>
        <li *ngFor="let selectedFlower of selectedFlowers">
            <input id="select-user" type="checkbox" (change)="onCheckboxChange(selectedFlower,$event)"> {{selectedFlower}}

        </li>
    </ul>

Now we have banded data from parent component to child component. Let us see how we can read these data from child component <flower-card-component>

To read data you should defined @Input() decorators. You need to import Input decorator from @angular/core to use @Input.

@Input() title:string =''

flower-card.component.ts file code.

import { Component, Input, OnInit } from '@angular/core';

@Component({
  selector: 'flower-card', // selector 
  templateUrl: './flower-card.component.html',
  styleUrls: ['./flower-card.component.scss']
})
export class FlowerCardComponent implements OnInit {

  constructor() { }
  
  @Input() title:string =''
  
  ngOnInit() {
  
  }
}}

Then I will copy paste commented code in parent component html (landing.component.html) file to child component html file and alter the file to display @input type variable value. (flower-card-component.html).

Since I am using PrimeNG component to display card and checkbox I will import PrimeNG modules in flower-card.component.ts file. Then I will move card style related code from landing.component.sccs to flower-card.component.scss file.

flower-card.component.html code:

<p-card header="{{title}}"  [style]="{width: '360px','float':'left','margin-bottom': '2em','margin-right': '2em','background-color':'light-pink'}" styleClass="p-card-shadow">
    <img alt="Card" width="100" height="100" src="assets/stock/{{title}}.jpg">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt
        quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque quas!</p>
    <p-checkbox name="flower" [style]="{'margin-top': '2em'}" value="{{title}}" label="Order Now" [(ngModel)]="selectedFlowers"></p-checkbox>
</p-card>

flower-card.component.scss code:

.ui-card-title{
    background-color: lightpink !important;
}

.ui-chkbox-label{
    vertical-align:bottom;
}

Pass data between child component to parent component in Angular

In our previous application when user click on the checkboxes in each card checkbox value is bonded to the array using ngModel. So selected flower names will be stored in an array and you can directly print the value by iterating the array.

Now our checkbox is in child component and our printing logic is in parent component. So, you need to find a way to print the value when and checkbox checked event called in the child component.

To have child to parent communication we can capture the change in data due to any event within the child component. This event is then propagated to the parent component using the @Output decorator and Eventemitter.

First, I will define the object as below.

@Output() selectedFlower = new EventEmitter<string>();

To use @Output and EventEmitter you must import EventEmitter and Output component from @angular/core library.

In flower-card.component.html file I have added the check box change event. So, I can capture that event and emit it value to parent component as below. Since I used PrimeNG checkbox you must use (onChange) event.

<p-card header="{{title}}"  [style]="{width: '360px','float':'left','margin-bottom': '2em','margin-right': '2em','background-color':'light-pink'}" styleClass="p-card-shadow">
    <img alt="Card" width="100" height="100" src="assets/stock/{{title}}.jpg">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt
        quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque quas!</p>
    <p-checkbox name="flower" [style]="{'margin-top': '2em'}" value="{{title}}" label="Order Now" (onChange)="selectCheckBox($event,title)" [(ngModel)]="selectedFlowers"></p-checkbox>
</p-card>

Then I am going to define the selectCheckBox event in flower-card.component.ts to emit the selected value.

selectCheckBox(value,name){
    this.selectedFlower.emit(name);
  }

import { Component, EventEmitter, Input, OnInit, Output, ViewEncapsulation } from '@angular/core';
import {CardModule} from 'primeng/card';
import {CheckboxModule} from 'primeng/checkbox';

@Component({
  selector: 'flower-card', // selector 
  templateUrl: './flower-card.component.html',
  styleUrls: ['./flower-card.component.scss'],
  encapsulation: ViewEncapsulation.None
})
export class FlowerCardComponent implements OnInit {

  constructor() { }

  @Input() title:string =''
  selectedFlowers: string[] = [];
  @Output() selectedFlower = new EventEmitter<string>();

  
  ngOnInit() {
  
  }

  selectCheckBox(value,name){
    this.selectedFlower.emit(name);
  }
}

Now we have implemented the code in child component. Let’s see how you can capture this emitted value and print it in a parent component.

For that you must bind the emitted event in a child component selected tag as below.

<flower-card [title]="flower.name" (selectedFlower)="printOrder($event)"></flower-card>

Here the bind event name should be same as the @Output name we defined in child component.

So now whenever user click on child component checkboxes that event is emitted to the parent component and printOrder() method defined in parent component will be executed. $event argument will contain the emitted value.

Inside the printOrder() method I have implemented the logic to check values is exist, if exist value will be remove from the array and if not value will be added to the array.

printOrder(flowerName){
    if(this.selectedFlowers.indexOf(flowerName)<0){
      this.selectedFlowers.push(flowerName)
    }
    else{
      let index = this.selectedFlowers.indexOf(flowerName);
      this.selectedFlowers.splice(index,1);
    }
}

Parent component code:

<h1>Welcome to my flower store</h1>

    <div *ngFor="let flower of myFlowerList;trackBy:trackFlowers">
      <flower-card [title]="flower.name" (selectedFlower)="printOrder($event)"></flower-card>
       </div>

    <div>Your have selected: {{searchText}}</div>

    <ul>
        <li *ngFor="let selectedFlower of selectedFlowers">
             {{selectedFlower}}

        </li>
    </ul>

import { Component, EventEmitter, OnInit, Output, ViewEncapsulation } from '@angular/core';
import { flower } from '../../domain/flower';
import { DataService } from 'src/app/services/data.service';

@Component({
  selector: 'app-landing',
  templateUrl: './landing.component.html',
  styleUrls: ['./landing.component.scss'],
 
})
export class LandingComponent implements OnInit {

  myFlowerList:flower[]=[];
  selectedFlowers: string[] =[];

  checkedList:string[]=[];
  searchText:string='';
  constructor(private dataService:DataService) { }

  ngOnInit() {
    this.mySellingFlowers();
    this.dataService.getSearchText().subscribe(response => {
      this.printSearchtext(response);
    })
  }

  printSearchtext(searchText){
    this.searchText = searchText;
  }

  printOrder(flowerName){
    if(this.selectedFlowers.indexOf(flowerName)<0){
      this.selectedFlowers.push(flowerName)
    }
    else{
      let index = this.selectedFlowers.indexOf(flowerName);
      this.selectedFlowers.splice(index,1);
    }

  }

  mySellingFlowers(){
    let rose = new flower();
    rose.name = "Rose";
    rose.price = 100;
    rose.availableQuantity = 1000;
    rose.isChecked = false;
    this. myFlowerList.push(rose);

    let lily = new flower();
    lily.name = "Lilly";
    lily.price = 80;
    lily.availableQuantity = 2000;
    lily.isChecked = false;
    this. myFlowerList.push(lily);

    let tulip = new flower();
    tulip.name = "Tulip";
    tulip.price = 100;
    tulip.availableQuantity = 2300;
    lily.isChecked = false;

    this. myFlowerList.push(tulip);

    let carnation = new flower();
    carnation.name = "Carnation";
    carnation.price = 50;
    carnation.availableQuantity = 1500;
    lily.isChecked = false;

    this. myFlowerList.push(carnation);

    let gerbera = new flower();
    gerbera.name = "Gerbera";
    gerbera.price = 50;
    gerbera.availableQuantity = 1500;
    lily.isChecked = false;

    this. myFlowerList.push(gerbera);

    let orchid = new flower();
    orchid.name = "Orchid";
    orchid.price = 50;
    orchid.availableQuantity = 1500;
    lily.isChecked = false;

    this. myFlowerList.push(orchid);

  }

  trackFlowers(index,flower){
    return flower?flower.name:undefined
  }
}

Now see the magic in your browser by clicking on the checkboxes.

You can find complete source code related to the angular implementation we have done so far here in GitHub.

Getting Started With PrimeNG Styling in Angular App

 This chapter we are going to check how you can add PrimeNG card component to show available flowers in the stock. Before styling the app, I have added some images of flowers to our assets folder as below.

In app.module.ts file you can import PrimeNG Card module as below.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { LandingComponent } from './modules/landing/landing.component';
import { HomeComponent } from './modules/home/home.component';
import { CardModule } from 'primeng/card';
;

@NgModule({
  declarations: [
    AppComponent,
    LandingComponent,
    HomeComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    CardModule,
    
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

import { Component, OnInit } from '@angular/core';
import { flower } from '../../domain/flower';
import {CardModule} from 'primeng/card';

@Component({
  selector: 'app-landing',
  templateUrl: './landing.component.html',
  styleUrls: ['./landing.component.scss']
})
export class LandingComponent implements OnInit {

  myFlowerList:flower[]=[];
  constructor() { }
  ngOnInit() {
    this.mySellingFlowers();
  }

  mySellingFlowers(){
    let rose = new flower();
    rose.name = "Rose";
    rose.price = 100;
    rose.availableQuantity = 1000;
    this. myFlowerList.push(rose);

    let lily = new flower();
    lily.name = "Lilly";
    lily.price = 80;
    lily.availableQuantity = 2000;
    this. myFlowerList.push(lily);

    let tulip = new flower();
    tulip.name = "Tulip";
    tulip.price = 100;
    tulip.availableQuantity = 2300;
    this. myFlowerList.push(tulip);

    let carnation = new flower();
    carnation.name = "Carnation";
    carnation.price = 50;
    carnation.availableQuantity = 1500;
    this. myFlowerList.push(carnation);

    let gerbera = new flower();
    gerbera.name = "Gerbera";
    gerbera.price = 50;
    gerbera.availableQuantity = 1500;
    this. myFlowerList.push(gerbera);

    let orchid = new flower();
    orchid.name = "Orchid";
    orchid.price = 50;
    orchid.availableQuantity = 1500;
    this. myFlowerList.push(orchid);
  }
}

   trackFlowers(index,flower){
    	return flower?flower.name:undefined
  	}
  }

Then you can use PrimeNG card module inside your component.html file as below.

<h1>Welcome to my flower store</h1>
<div *ngFor="let flower of myFlowerList;trackBy:trackFlowers">
        <p-card header="{{flower.name}}"  [style]="{width: '360px','float':'left','margin-bottom': '2em','margin-right': '2em','background-color':'light-pink'}" styleClass="p-card-shadow">
                <img alt="Card" width="100" height="100" src="assets/stock/{{flower.name}}.jpg">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt
                quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque quas!</p>
                   </p-card>
    </div>

I have changed background styles in the banner in style.scss file.  

@import url('https://fonts.googleapis.com/css family=Nunito:400,700&display=swap');

$primary: indianred;

body {
    margin: 0;
    font-family: 'Nunito', 'sans-serif';
    font-size: 18px;
}

.container {
    width: 80%;
    margin: 0 auto;
}

header {
    background: $primary;
    padding: 1em 0;

    a {
        color: white;
        text-decoration: none;
        font-size: larger;
    }
    a.logo {
        font-weight: bold;
        color: white;
        font-size: larger;
    }

    nav {
        float: right;

        ul {
            list-style-type: none;
            margin: 0;
            display: flex;

            li a {
                padding: 1em;
                color:white;
                font-weight: bold;
                &:hover {
                    background: darken($primary, 10%);
                }
            }
        }
    }
}

h1 {
    margin-top: 2em;
}

Once you apply PrimeNG cards modules, app will look like below.

.ui-card-title{
    background-color: lightpink !important;
}

import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import { flower } from '../../domain/flower';
import {CardModule} from 'primeng/card';

@Component({
  selector: 'app-landing',
  templateUrl: './landing.component.html',
  styleUrls: ['./landing.component.scss'],
  encapsulation: ViewEncapsulation.None
})
export class LandingComponent implements OnInit {

  myFlowerList:flower[]=[];
  constructor() { }

  ngOnInit() {
    this.mySellingFlowers();
  }

  mySellingFlowers(){
    let rose = new flower();
    rose.name = "Rose";
    rose.price = 100;
    rose.availableQuantity = 1000;
    this. myFlowerList.push(rose);

    let lily = new flower();
    lily.name = "Lilly";
    lily.price = 80;
    lily.availableQuantity = 2000;
    this. myFlowerList.push(lily);

    let tulip = new flower();
    tulip.name = "Tulip";
    tulip.price = 100;
    tulip.availableQuantity = 2300;
    this. myFlowerList.push(tulip);

    let carnation = new flower();
    carnation.name = "Carnation";
    carnation.price = 50;
    carnation.availableQuantity = 1500;
    this. myFlowerList.push(carnation);

    let gerbera = new flower();
    gerbera.name = "Gerbera";
    gerbera.price = 50;
    gerbera.availableQuantity = 1500;
    this. myFlowerList.push(gerbera);

    let orchid = new flower();
    orchid.name = "Orchid";
    orchid.price = 50;
    orchid.availableQuantity = 1500;
    this. myFlowerList.push(orchid);

  }

  trackFlowers(index,flower){
    return flower?flower.name:undefined
  }
}

  How to set up Angular environment

             How to create Angular project

             How to generate component and define routings in Angular

Let’s make our app little bit interactive.

You can put all your common style of your application to style.css file which applies globally.

Copy and paste below code in your style.css file

/* You can add global styles to this file, and also import other style files */

@import url('https://fonts.googleapis.com/css?family=Nunito:400,700&display=swap');

$primary: rgb(216, 172, 78);

body {

    margin: 0;

    font-family: 'Nunito', 'sans-serif';

    font-size: 18px;

}

.container {

    width: 80%;

    margin: 0 auto;

}

Things we learned so far

How to set up environment

          How to create Angular project

Today we will understand how you can create component using Angular CLI and how you can define routing to each component.

You can run below command to generate the component using Angular CLI

CD <<folder where you want to have the component>> 

Run ng g c <<component name>>

ng g c <<component name>>

Angular CLI will create for files and also update the app.module.ts file by adding new entry to the import section.

Next we will create the component for home page.

Last tutorial you have learned how to set up your environment to work with Angular. In this tutorial you will learn how create your first Angular application.

Steps to create the Angular Project

Open command prompt Run 

ng new <<your app name>>

Once you run the above command it will ask you to select the type of css that you need to use.

Then Angular CLI will install necessary npm packages and other dependencies.

ng new my-flower-store command

Within a minute or two CLI will create the project with all the necessary features that you can run your app.

Initial app contains

• A new workspace, with a root folder named my-flower-store (project name you gave with ng new command)
• An initial skeleton app project, also called my-flower-store
• An end-to-end test project (in the e2e subfolder).
• Related configuration files.

Google release AngularJS in year 2010. It got popular immediately because it made static HTML interactive. However, with other latest web development technologies developers started to see drawbacks of AngularJS.

Google then start to rewrite framework again and decided to shift from Java Script to Type Script. Type Script is helpful to avoid drawback of AngularJS

Angular 2 was then introduced in 2016 and it evolves up to Angular 9.

How to install Angular

To setting up the angular framework you need 

1. Node

To install node go to official site of node to download the version you need (nodejs)

Run the downloaded Node.js .msi Installer 

If you want to know the node version installed in your computer run following command

 node -v