Tag: angular

A short list of build errors and resolution;

To update CLI, refer to this link;

https://angular.dev/update-guide

If you are using latest CLI and still see the error, then run this in your project;

npm i @angular-devkit/build-angular@18 --force

TODO.. add any other errors

Recently i started getting this message on windows;

To fix, make sure following is working;

1. npm version
2. node version

Finally, to fix the problem run this;

npm link @angular/cli

run, “ng version” and it should work. mine started working 🙂

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.