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.
Steps to create a new component in Angular:
Step 1: Download and install NodeJS from its official website, npm is included with that.
Step 2: To install angular CLI run the following command in the terminal.
npm install -g @angular/cli
Step 3: After installing angular cli, set up a new project in angular using the below command:
ng new my-angular-app
Folder structure:
Dependencies:
"dependencies": {
"@angular/animations": "^17.1.0",
"@angular/common": "^17.1.0",
"@angular/compiler": "^17.1.0",
"@angular/core": "^17.1.0",
"@angular/forms": "^17.1.0",
"@angular/platform-browser": "^17.1.0",
"@angular/platform-browser-dynamic": "^17.1.0",
"@angular/router": "^17.1.0",
"rxjs": "~7.8.0",
"tslib": "^2.3.0",
"zone.js": "~0.14.3"
}
Step 3: Navigate to the project using cd your-project-name and open the terminal and write the command mentioned below to generate a new component in angular:
ng generate component component-name
“OR”
You can use this shortcut
ng g c component-name
Note: After this command, it will ask you for styling so chose as per your needs( css for now) then it will ask for SSR, press n to skip it then the component will be generated in src folder of the project.
The component will look like this:
Example to create a New Component in Angular
Code: Now add the following code in the required files.
<!-- Html Structure of component--> < div class = "card" >
< div class = "card-header" >
< h2 class = "heading" >GeeksforGeeks</ h2 >
</ div >
< div class = "card-body" >
< img src = "../../assets/img/gfg logo.png" alt = "GeeksforGeeks Image" />
< p >
GeeksforGeeks 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 >
|
// app.compoenent.html < app-card ></ app-card >
|
/* 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 : 10 vh;
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 ;
}
} |
// 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' ;
} |
// 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