Ciclo de vida de componentes: ngOnChanges

How to mount a component in an Angular page?

To work properly with components in Angular, it is necessary to follow certain steps to mount and configure each part. Below, we illustrate with an example how a component can be used in our application through the process of importing and configuring it on a page.

Step 1: Create the base HTML

Initially, it is important to structure the HTML of the page where you want to assemble the component. Here we create some paragraphs to give structure and separate elements visually:

<p>Paragraph1</p><p>Paragraph2</p><p>Paragraph3</p><p>Paragraph3</p>

Step 2: Assemble the component

Once the basic elements are ready, we proceed to integrate the desired component. Using the component selector, we can add it directly to the HTML:

<app-counter></app-counter>.

Step 3: Import the component

It is vital to make sure that the component is correctly imported. In Angular, one component must be known in the context of the other. This is done by importing the component into the module that will use it.

import { CounterComponent } from 'shared/components/counter.component';

Add it to the imports array of your module:

@NgModule({ imports: [ CounterComponent ],. ..})

How to use signals to handle dynamic changes?

The use of signals is crucial to handle dynamic data and monitor changes in the application in a reactive way.

Step 1: Create signals

First, initialize the signals needed for critical variables such as duration and message.

const durationSignal = signal(1000);const messageSignal = signal('Default message');

Step 2: Manipulating signals with events

With the signals created, methods are implemented to modify these signals using events, commonly through HTML inputs.

function changeDuration(event: Event) { const inputElement = event.target as HTMLInputElement; durationSignal.set(Number(inputElement.value));}
function changeMessage(event: Event) { const inputElement = event.target as HTMLInputElement; messageSignal.set(inputElement.value);}

Step 3: Create interactive inputs

These inputs connect to the signals and allow the user to interact and modify values:

<input type="number" [value]="durationSignal" (input)="changeDuration($event)"><input type="text" [value]="messageSignal" (input)="changeMessage($event)"> <input type="text" [value]="messageSignal" (input)="changeMessage($event)">

How to visualize and debug components in Angular?

Once everything is configured, visualize your component and its interactions in practice.

Step 1: Configure demo page

If the about page is the one where the app-counter component is displayed, make sure to render the new page properly:

// In the router moduleconst routes: Routes = [ { path: 'about', component: AboutComponent },. ..];

Step 2: Browsing results in the browser

After correctly configuring the page and components, observe the interaction from the browser. Use tools such as DevTools to debug each event in the lifecycle:

1. On startup, the component's constructor is executed first.
2. The ngOnChanges event is triggered whenever an input property changes.
3. The console displays specific changes and their history, such as previous and current values.

Careful implementation of these steps allows for a rich and interactive experience in Angular applications, facilitating future development and component enhancements. Continue exploring and honing your Angular skills!