Post
Ask Question

Component-Based Architecture in Angular

Angular's component-based architecture promotes reusability and modularity. .NET developers can leverage their knowledge of building reusable components in technologies like ASP.NET and apply it to Angular. This architecture facilitates code organization, maintenance, and collaboration among developers.

Create a Parent Component: In your Angular project, create a parent component. For example, create a file named parent.component.ts with the following code:

Import {
    Component
}
from‘ @angular / core’;
@Component({
    selector: ’app - parent’,
    template: ‘ < h1 > Parent Component < /h1>          
    <app-child [message]=”parentMessage”></app - child > ‘,
}) export class ParentComponent {
    parentMessage = ‘Hello from Parent!’;
}

Create a Child Component: Create a child component that receives input from the parent component. For example, create a file named child.component.ts with the following code:

import {
    Component,
    Input
} from‘ @angular / core’;
@Component({
    selector: ‘app - child’,
    template: ’ < h2 > Child Component < /h2>      
   <p>{{ message }}</p > ’,
}) export class ChildComponent {
    @Input() message: string;
}

3. Register the Components: Open the app.module.ts file and import the ParentComponent and ChildComponent. Add them to the declarations array within the @NgModule decorator. For example:

import {
    NgModule
} from‘ @angular / core’;

import {
    BrowserModule
} from‘ @angular / platform - browser’;

import {
    ParentComponent
} from‘. / parent.component’;

import {
    ChildComponent
} from‘. / child.component’;

@NgModule({

    declarations: [ParentComponent, ChildComponent],
    imports: [BrowserModule],
    bootstrap: [ParentComponent],

})

export class AppModule {}

4. Use the Components in a Template: Open the app.component.html file and use the app-parent selector to display the parent component. For example:

<app-parent></app-parent>

5. Build and run the application: Use the following command to build and serve the Angular application:

ng serve

Your application will be accessible at http://localhost:4200.

With this setup, you have implemented a component-based architecture in Angular. The ParentComponent acts as the parent component and contains the ChildComponent within its template. The parent component passes the parentMessage property to the child component using property binding ([message]="parentMessage"). The child component receives this input through the @Input() decorator and displays the message in its template.


Similar Articles