Creating Reusable Components in Angular 8

Here, i will share with you simple example of how to create simple reusable components in angular 8 application. i will provide you simple steps to creating reusable components in angular 8 application.

Let's create simple and reusable components in angular 8 application. you need to just follow bellow things.

However, i will give you step by step very simple example of reusable component, so you will easily understand and got it how you can create more.

In this example, we will create post component. in that component we will simple display post object data. when you have array of post object then you for loop and use this component every where. so let's see this example step by step.

Step 1: Create App

In this step, we will create very simple example with simple component. so you need to run following command to install new angular app.

ng new appComponent

Step 2: Create Post Component

Here, we will create simple component using cli command. in component file we will write code as like bellow.

Let's run bellow command to create Post Component:

ng g component Post

Now you can see there is a created post/post.component.ts file. you can update like as bellow file:

src/app/post/post.component.ts

import { Component, OnInit, Input } from '@angular/core';
  
@Component({
  selector: 'my-post',
  templateUrl: './post.component.html',
  styleUrls: ['./post.component.css']
})
export class PostComponent{
  @Input() post;
}

Now you can update view file for post component:

src/app/post/post.component.html

<div>
    <p><strong>{{ post.id }}</strong>. {{ post.title }}</p>
</div>

Step 3: Update App Component

Here, we will update our app component file as like bellow:

src/app/app.component.ts

import { Component } from '@angular/core';
  
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'appComponent';
  posts = [
    {
      id: 1,
      title: 'Angular Http Post Request Example'
    },
    {
      id: 2,
      title: 'Angular 8 Routing and Nested Routing Tutorial With Example'
    },
    {
      id: 3,
      title: 'How to Create Custom Validators in Angular 8?'
    },
    {
      id: 4,
      title: 'How to Create New Component in Angular 8?'
    }
  ];
}

Step 4: Reuse Post Component

Now we will simply for loop with our post component. You can also use on your entire application post component as like we are using now.

Let's update view file:

src/app/app.component.html

<h1>How to create reusable components in Angular 8 - ItSolutionStuff.com</h1>
   
<my-post *ngFor="let post of posts" [post]="post"></my-post>

Now you can run your application by using following command:

ng serve

I hope it can help you...