Skip to content
Related Articles

Related Articles

Components in Angular 8
  • Last Updated : 04 Nov, 2020

The component is the basic building block of Angular. It has a selector, template, style, and other properties, and it specifies the metadata required to process the component. 

Creating a Component in Angular 8:

To create a component in any angular application, follow the below steps:

  • Get to the angular app via your terminal.
  • Create a component using the following command:
ng g c <component_name> 
OR
ng generate component <component_name> 
  • Following files will be created after generating the component:

Using a component in Angular 8:



  • Go to the component.html file and write the necessary HTML code.
  • Go to the component.css file and write the necessary CSS code.
  • Write the corresponding code in component.ts file.
  • Run the Angular app using ng serve –open

Implementation code: Please note that the name of the component in the below code is gfg component.

gfg.component.html:




<h1>GeeksforGeeks</h1>

gfg.component.css:




h1{
    color: green;
    font-size: 30px;
}

gfg.component.ts:




import { Component, OnInit } from '@angular/core';
  
@Component({
  selector: 'app-gfg',
  templateUrl: './gfg.component.html',
  styleUrls: ['./gfg.component.css']
})
export class GfgComponent{
    a ="GeeksforGeeks";
}

app.module.ts:




import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
  
import { AppComponent } from './app.component';
import { GfgComponent } from './gfg/gfg.component';
   
   
@NgModule({
  imports:      [ BrowserModule ],
  declarations: [ AppComponent, GfgComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

Output:

My Personal Notes arrow_drop_up
Recommended Articles
Page :