Author: Shahzad Khan

Favicon icon also known as a shortcut icon, website icon, tab icon, URL icon, or bookmark icon, is a file containing a small icon. associated with a particular website or web page. A web designer can create such an icon and upload it to a website or a web page.
Its associated with a website at address bar. In angular it is stored with a default name i.e favicon.ico which is angular logo, we can change it in simple steps as below.
So, let’s get started,
Step 1: copy your logo in src folder
Step 2: Navigate to src folder and remove the favicon.ico file.
Step 3: copy new png favicon inside src folder.
Step 4: Open the index.html file and change the favicon file name (with the newly added icon name).

Step 5: Inside the angular.json file change name of the favicon in assets array.
“assets”: [
“src/favicon.png”,
“src/assets”
],

That’s it, In these five steps we can easily replace favicon icon in Angular.

To capture a child component’s click event in the parent component in Angular, you can use the following steps:

• In the child component:
  • Use the @Output decorator to create an event emitter.
  • Emit the event when the click occurs.

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

   @Component({
     selector: 'app-child',
     template: `<button (click)="onClick()">Click me</button>`
   })
   export class ChildComponent {
     @Output() clickEvent = new EventEmitter<any>();

     onClick() {
       this.clickEvent.emit('Data from child');
     }
   }

• In the parent component:
  • Listen to the event using the event binding syntax ((clickEvent)) in the child component’s template.
  • Call a method in the parent component to handle the event.

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

   @Component({
     selector: 'app-parent',
     template: `
       <app-child (clickEvent)="handleChildClick($event)"></app-child>
     `
   })
   export class ParentComponent {
     handleChildClick(data: any) {
       console.log('Click event received from child:', data);
     }
   }

Explanation:

• The @Output decorator in the child component creates a custom event that the parent component can listen to.
• The EventEmitter class is used to emit the event.
• The emit() method is used to send data along with the event.
• The (clickEvent) syntax in the parent component’s template listens for the event emitted by the child component.
• The handleChildClick() method in the parent component is called when the event is emitted.

This way, you can effectively capture and handle child component events in the parent component in Angular.

To implement a table with paging, sorting, and filtering feature we can use Angular Material. Angular Material is a I Component library that implements Material Design. This UI design language is developed by Google in 2014 which focuses on using grid-based layouts, response animations, transitions, padding and depth effects such as lighting and shadows.

To install Angular Material, follow this;

• Open Command Prompt
• Navigate to /ClientApp/ folder
• Type the following command

> ng add @angular/material

This will trigger the Angular Material command-line setup wizard, which will install following npm packages;

• @angular/material
• @angular/cdk (prerequisite)

Make sure to install same @angular/material version specified in the package.json.

During the installation process, you will be asked to pick prebuilt theme. I am picking up the first one (Indigo/Pink). Once done the setup process will update the following files;

- package.json
- /src/main.ts
- /src/app/app.module.ts
- angular.json
- src/index.html
- src/styles.css

Enjoy!