Month: August 2024

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!

The story of AngularJS started in 2009 when Miško Hevery (now senior computer scientist and Agile coach at Google) and Adam Abrons (now director of engineering at Grand Rounds) were working on their side project, an end-to-end (E2E) web development tool that would have offered an online JSON storage service and also a client-side library to build web applications depending on it. To publish their project, they took the GetAngular.com hostname.

During that time, Hevery, who was already working at Google, was assigned to the Google Feedback project with two other developers. Together, they wrote more than 17,000 lines of code in 6 months, slowly sinking into a frustrating scenario of code bloat and testing issues. Given the situation, Hevery asked his manager to rewrite the application using GetAngular (the side project mentioned previously), betting that he could do that alone within 2 weeks. His manager accepted and Hevery lost the bet shortly thereafter, as the whole thing took him 3 weeks instead of two; however, the new application had only 1,500 lines of code instead of 17,000. This was more than enough to get Google’s interest for the new framework, which was given the name of AngularJS shortly thereafter.

To listen to the full story, take a look at the following Miško Hevery keynote speech at ng-conf 2014:

https://www.youtube.com/watch?v=r1A1VR0ibIQ

Interested in building a test application, follow this step-by-step guide;

1) Angular Development – Getting Started

2) Angular Development – Break and Fix

3) Angular Development – Sample Server Side

4) Angular Development – Sample Angular Side

5) JSON conventions and defaults

6) Serving data with Angular Material