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:
- Creating the Component: We used the
ng generate component blog-card
command to create the blog card component. - Updating HTML and CSS: We customized the blog card’s look by editing its HTML and CSS files.
- Using the Component: We added the blog card component to the main part of the app to show how it can be reused.
- 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.
No Comment! Be the first one.