Example to create a New Component in Angular

Code: Now add the following code in the required files.

HTML

<!-- Html Structure of component-->
 
<div class="card">
    <div class="card-header">
        <h2 class="heading">w3wiki</h2>
    </div>
    <div class="card-body">
        <img src="../../assets/img/gfg logo.png" alt="w3wiki Image" />
        <p>
            w3wiki is a leading platform that provides computer science
            resources and coding challenges for programmers and technology
            enthusiasts, along with interview and exam preparations for upcoming
            aspirants. With a strong emphasis on enhancing coding skills and
            knowledge, it has become a trusted destination for over 12 million 
            plus registered users worldwide. The platform offers a vast 
            collection of tutorials, practice problems, interview tutorials,
            articles, and courses, covering various domains of computer science.
        </p>
    </div>
</div>

HTML

// app.compoenent.html
 
<app-card></app-card>

CSS

/* my-component.component.css */
body {
    font-family: 'Roboto', sans-serif;
}
 
.heading {
    text-align: center;
    color: #ffff;
}
 
.card {
    width: 20%;
    height: auto;
    margin: auto;
    margin-top: 10vh;
    border-radius: 10px;
    overflow: hidden;
    background: linear-gradient(to bottom right, #4e54c8, #8f94fb);
}
 
.card-header {
    background: linear-gradient(to top left, #00a300, #00c900);
    padding: 10px;
}
 
.card-body {
    padding: 20px;
}
 
.card img {
    max-width: 60%;
    height: auto;
    margin-bottom: 20px;
    border-radius: 20px;
    display: flex;
    margin: auto;
}
 
.card-body p {
    color: #ffff;
    margin-top: 20%;
 
 
}
 
@media screen and (max-width: 768px) {
    .card {
        width: 90%;
        height: auto;
    }
}

Javascript

// app.component.ts
 
import { Component, NgModule } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { CardComponent } from './my-component/my-component.component';
 
@Component({
    selector: 'app-root',
    standalone: true,
    imports: [RouterOutlet,
        my - component],
    templateUrl: './app.component.html',
    styleUrl: './app.component.css'
})
export class AppComponent {
    title = 'card';
}

Javascript

// my-component.component.ts
 
import { Component } from '@angular/core';
 
@Component({
    selector: 'my-component',
    standalone: true,
    imports: [],
    templateUrl: './my-component.component.html',
    styleUrl: './my-component.component.css'
})
export class my-component {
 
}

Run the project using command given below:

ng serve

Output:

How do you create a new component in Angular

How to create a new component in Angular?

A component in Angular is the building block for making web pages. It is a reusable block of code that can be used anywhere in the app any number of times. It provides scalability, reusability, and readability. Each component does a specific job like showing a menu, a photo or a card, etc.

In this article, we will see how to create a new component in Angular.

Tags:

#AngularJS-Basics #AngularJS #Web Technologies

Folder structure:

Example to create a New Component in Angular

HTML

HTML

CSS

Javascript

Javascript

Output:

How to create a new component in Angular?

Similar Reads

Contact Us