Let's talk about how to create and use simple independent components in Angular

This article will take you to understand the independent components in Angular, introduce how to create simple independent components and how to use them in Angular applications. I hope it will be helpful to everyone!

If you are learning Angular, then you may have heard of independent components (Component). As the name suggests, independent components are components that can be used and managed independently. They can be included in or referenced by other components.

Create component

To create an Angular component, you first need to use the Angular CLI tool to generate an empty component skeleton. Suppose we want to create a component named hello-world, we can run the following command:

ng generate component hello-world

This command will automatically generate a hello-world folder , which contains all the files required by the component, such as Component classes, HTML templates, and style sheets. [Related tutorial recommendation: "angular tutorial"]

Now we can edit the hello-world.component.ts file to define our component class. The following code example demonstrates a minimal component definition:

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

@Component({
    selector: 'app-hello-world',
    template: &#39;<p>Hello World!</p>&#39;,
})
export class HelloWorldComponent {
}

In this component definition, we use the @Component decorator to specify the component's selector (selector), also It is the tag name of the component in the template. At the same time, we also determined the HTML template of the component, which just displays a "Hello World!" paragraph tag.

Next, we can modify the app.component.html file to use this new component. Just add the <app-hello-world> tag to the appropriate location in the file.

<app-hello-world></app-hello-world>

Now open the application and you should be able to see "Hello World!" appear on the page.

Component input

When using a component, we usually need to pass some data to it, which can be achieved through the input properties of the component.

To define a component input property, define a property with the @Input() decorator in the component class. For example, let's say we want to set the component's message to a user-supplied value:

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

@Component({
    selector: 'app-hello-world',
    template: &#39;<p>{{message}}</p>&#39;,
})
export class HelloWorldComponent {
    @Input() message: string;
}

In this modified HelloWorldComponent, we've added a message input property , and use it in the template to display the message.

Now, when using this component, we can pass messages to it as properties. For example:

<app-hello-world message="Welcome to my app!"></app-hello-world>

Component output

Similar to input properties, components can also communicate with other components through output events. To define an output event, use the @Output() decorator and the EventEmitter class.

For example, assuming we want to create a button in a component and trigger an event when the button is clicked, we can define it as follows:

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

@Component({
    selector: 'app-button-with-click-event',
    template: &#39;<button (click)="onClick()">Click me</button>&#39;,
})
export class ButtonWithClickEventComponent {
    @Output() buttonClick = new EventEmitter<any>();

    onClick(): void {
        this.buttonClick.emit();
    }
}

In this component, we create an output attributebuttonClick, and the event is triggered in the onClick() method.

Now, when using this component, we only need to listen to its buttonClick event:

<app-button-with-click-event (buttonClick)="onButtonClick()"></app-button-with-click-event>

Finally, implement onButtonClick(( ) method to respond to the event.

In this blog post, we took a deep dive into the concept of Angular standalone components and how to create and use them. We first introduced what independent components are and why we use Angular independent components.

We further explored how Angular CLI helps us easily create new standalone components and discussed how to use inputs, outputs, and events to make components more flexible and versatile.

Finally, we emphasize the importance of modular programming methods in Angular independent components. By splitting the application into small, independent components, we can better manage the code base and achieve more readable, maintainable code.

With the code examples in the chapters, we can start building our own independent components and add more functionality and reusability to our applications.

For more programming-related knowledge, please visit: Introduction to Programming! !

The above is the detailed content of Let's talk about how to create and use simple independent components in Angular. For more information, please follow other related articles on the PHP Chinese website!