Creating and Using Components in Angular

Components are fundamental building blocks of an Angular application. They are reusable bits of code that make up various sections of your website.

Examples of Components

Components can be small UI elements such as buttons or cards, or larger UI elements such as sidebars, navigation bars, or whole pages.

Create a New Angular Application

First, ensure you have Angular CLI installed. If not, you can install it using the command:

npm install -g @angular/cli

Create a new Angular application or navigate to your existing one:

ng new blog-app
cd blog-app

Generate a New Component

Open your terminal or the built-in terminal in an IDE like Visual Studio Code. Navigate to the root folder of your project and generate a new component named blog-card:

ng generate component blog-card

Update the Component’s HTML and CSS

Open the TypeScript file (src/app/blog-card/blog-card.component.ts) and ensure it looks like this:

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

@Component({
  selector: 'app-blog-card',
  templateUrl: './blog-card.component.html',
  styleUrls: ['./blog-card.component.css']
})
export class BlogCardComponent implements OnInit {
  constructor() { }

  ngOnInit(): void {
    // Add any initialization logic here
  }
}

Use the Component in Another Component

Now, let’s add the blog-card component to the main application component. Open src/app/app.component.html and add the following content to create a simple layout with a navbar and multiple blog cards:

<div class="navbar-header">
    <a class="nav-title"><b>My Blog</b></a>
</div>

<div class="blog-container">
    <app-blog-card></app-blog-card>
    <app-blog-card></app-blog-card>
    <app-blog-card></app-blog-card>
</div>

Add the corresponding CSS to src/app/app.component.css to style the navbar and layout:

.navbar-header {
    background-color: #07393C;
    padding: 30px 50px;
    display: flex;
    align-items: center;
    font-family: Arial, sans-serif;
}

.nav-title {
    text-decoration: none;
    color: white;
    font-size: 24px;
}

.blog-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
}

Run the Application

Finally, start your Angular application using the following command:

ng serve

Open your web browser and navigate to http://localhost:4200. You should see your new blog cards displayed on the page.

Conclusion

By following these steps, you have created and used a reusable blog card component in an Angular application:

1. Creating the Component: We used the ng generate component blog-card command to create the blog card component.
2. Updating HTML and CSS: We customized the blog card’s look by editing its HTML and CSS files.
3. Using the Component: We added the blog card component to the main part of the app to show how it can be reused.
4. Styling the Layout: We added CSS to style the navbar and layout for a neat and responsive design.

These steps have shown you how to build and use reusable components in Angular, making your application easier to maintain and expand. Now, you can further customize and improve your components as needed.