DOTNET

Monday, October 23, 2023

Nested Component Example 2 (Input Properites)

How to Pass data from Parent Component to Child Component.

Now, we will pass , all, male and female these properties values to Parent Component.

To do this, we need to we need to decorate the StudentCountComponent properties (all, male and female) with @Input() decorator.

first, you need to import it from the @angular/core.

.ts Changes (CountComponent)

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

@Component({
  selector: 'app-students-count',
  templateUrl: './students-count.component.html',
  styleUrls: ['./students-count.component.css']
})
export class StudentsCountComponent {
  @Input()
  all: number;
  @Input()
  male: number;
  @Input()
  female: number;



How to Pass data from the parent component to the child component?Modify the Grid Component.ts

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

@Component({
  selector: 'app-students-grid',
  templateUrl: './students-grid.component.html',
  styleUrls: ['./students-grid.component.css']
})
export class StudentsGridComponent {
  students: any[] = [
    {
        ID: '1', FirstName: 'Rajakonda Uday', LastName: 'Kumar',
        DOB: '12/8/1990', Gender: 'Male', CourseFee: 12334.56
    },
    {
        ID: '2', FirstName: 'Kittu', LastName: 'R',
        DOB: '10/14/1989', Gender: 'Male', CourseFee: 6666.00
    },
    {
        ID: '3', FirstName: 'abc', LastName: 'd',
        DOB: '7/24/1992', Gender: 'Female', CourseFee: 6543.15
    },
    {
        ID: '4', FirstName: 'def', LastName: 'd',
        DOB: '8/19/1990', Gender: 'Female', CourseFee: 9000.50
    },
    {
        ID: '5', FirstName: 'ads', LastName: 'df',
        DOB: '4/12/1991', Gender: 'Male', CourseFee: 9876.54
    }
];
getTotalStudentsCount(): number {
  return this.students.length;
}
getMaleStudentsCount(): number {
  return this.students.filter(std => std.Gender === 'Male').length;
}
getFemaleStudentsCount(): number {
  return this.students.filter(std => std.Gender === 'Female').length;
}
}

The points to remember is that in the filter method we are using the triple equals (===) instead of the double equals (==). The meaning single, double and triple equals in TypeScript are as follows
= Assign a value
== Compare two values
=== Compare two values and their types

.Html Changes


<app-students-count [all]="getTotalStudentsCount()"
[male]="getMaleStudentsCount()"
[female]="getFemaleStudentsCount()"></app-students-count>
<br/><br/>
<table>
    <thead>
        <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Gender</th>
            <th>DOB</th>
            <th>Course Fee</th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor='let student of students'>
            <td>{{student.ID | uppercase}}</td>
            <td>{{student.FirstName}}</td>
            <td>{{student.Gender}}</td>      
            <td>{{student.DOB | date:'dd/MM/y'}}</td>
            <td>{{student.CourseFee | currency:'USD':true:'1.2-2'}}</td>
        </tr>
        <tr *ngIf="!students || students.length==0">
            <td colspan="10">
                No Students to display
            </td>
        </tr>
    </tbody>
</table>


Student count component.html

<span>Show : </span>
<input type="radio" name="options" />
<span>{{"All(" + all + ")"}}</span>
<input name="options" type="radio">
<span>{{"Male(" + male + ")"}}</span>
<input name="options" type="radio">
<span>{{"Female(" + female + ")"}}</span>


Output

Sunday, October 22, 2023

Nested Component Example 1

Following user Interface

We have two components now.

Open terminal and then type ng g c StudentsGrid --flat

.ts Changes (students-grid.component)

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

@Component({
  selector: 'app-students-grid',
  templateUrl: './students-grid.component.html',
  styleUrls: ['./students-grid.component.css']
})
export class StudentsGridComponent {
  students: any[] = [
    {
        ID: '1', FirstName: 'Rajakonda Uday', LastName: 'Kumar',
        DOB: '12/8/1990', Gender: 'Male', CourseFee: 12334.56
    },
    {
        ID: '2', FirstName: 'Kittu', LastName: 'R',
        DOB: '10/14/1989', Gender: 'Male', CourseFee: 6666.00
    },
    {
        ID: '3', FirstName: 'abc', LastName: 'd',
        DOB: '7/24/1992', Gender: 'Female', CourseFee: 6543.15
    },
    {
        ID: '4', FirstName: 'def', LastName: 'd',
        DOB: '8/19/1990', Gender: 'Female', CourseFee: 9000.50
    },
    {
        ID: '5', FirstName: 'ads', LastName: 'df',
        DOB: '4/12/1991', Gender: 'Male', CourseFee: 9876.54
    }
];
}

Let us create one more component for count

.ts Changes students-grid.component

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

@Component({
  selector: 'app-students-count',
  templateUrl: './students-count.component.html',
  styleUrls: ['./students-count.component.css']
})
export class StudentsCountComponent {
  all: number = 5;
  male: number = 3;
  female: number = 2;
}

Here, we have set the selector=’app-student-count’. So, we can use this selector as a directive where we want to use this component. We are going to use this StudentCountComponent within the StudentGridComponent using the app-student-count selector as a directive.

appModule.ts

students-count.html

<span>Show : </span>
<input type="radio" name="options" />
<span>{{"All(" + all + ")"}}</span>
<input name="options" type="radio">
<span>{{"Male(" + male + ")"}}</span>
<input name="options" type="radio">
<span>{{"Female(" + female + ")"}}</span>

Now, we need to nest the StudentCountComponent in StudentGridComponent and to do so, we need to use the StudentCountComponent selector (i.e. app-students-count) as a directive i.e. <app-student-count></app-students-count> on StudentGridComponent..

StudentGrid.html

<app-students-count></app-students-count>
<br/><br/>
<table>
    <thead>
        <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Gender</th>
            <th>DOB</th>
            <th>Course Fee</th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor='let student of students'>
            <td>{{student.ID | uppercase}}</td>
            <td>{{student.FirstName}}</td>
            <td>{{student.Gender}}</td>      
            <td>{{student.DOB | date:'dd/MM/y'}}</td>
            <td>{{student.CourseFee | currency:'USD':true:'1.2-2'}}</td>
        </tr>
        <tr *ngIf="!students || students.length==0">
            <td colspan="10">
                No Students to display
            </td>
        </tr>
    </tbody>
</table>


Output

D/w Template VS TemplateUrl in Angular

@Component decorator is a function , and it has got two template properties one is template and the other is templateURL

Different ways to create Templates in Angular

We have got two types of templates one is

Inline template
External Template

using the template property. That means you need to write the required HTML inside the typescript file.

Create a component

.ts

appModule.ts

Index.html

Output

Using double quotes:

You can also replace the above HTML Code within a pair of double quotes as shown below and it also work as expected.

When you have multiple lines of HTML code then you need to use the tilt otherwise you will get a compile-time error as shown in the below image.

External Template:

The External templates define the HTML in a separate file and refer to that file using templateUrl property of Component decorator

When you have a complex view, then it is recommended by angular to create that complex view in an external HTML File instead of an inline template

.html

Output

Example with AutoComplete in Angular

First create a component

ng g c autocomplete --flat

.html

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

@Component({
  selector: 'app-autocomplete',
  templateUrl: './autocomplete.component.html',
  styleUrls: ['./autocomplete.component.css']
})
export class AutocompleteComponent {
  prods=[
    {"pid":"p001","name":"htc","price":8000},
    {"pid":"p002","name":"sony","price":40000},
    {"pid":"p003","name":"hp","price":46000},
    {"pid":"p004","name":"samsung","price":18000}
  ];
  res : any[] = [];

  filterprods(event:Event)
  {
    let autocomplete=(event.target as HTMLInputElement).value
    this.res=this.prods.filter(p=>{
       return p.name.startsWith(autocomplete);
    });
  }
}


.html 

<h3>Enter Product Name:</h3>
<input type="text" (input)="filterprods($event)">
<table style="font-size:x-large" border="1" *ngIf="res.length>0">
 <tr>
     <th>pid</th>
     <th>name</th>
     <th>price</th>
 </tr>
 <tr *ngFor="let p of res">
   <td>{{p.pid}}</td>
   <td>{{p.name}}</td>
   <td>{{p.price}}</td>
 </tr>
</table>

Output