Angular 10 - Components

A component is one of the rudimentary building blocks of an Angular app. An app can have more than one component. In a normal app, a component contains an HTML view page class file, a class file that controls the comportment of the HTML page, and the CSS/SCSS file to style your HTML view. A component that can be engendered utilizing the @Component decorator that is a component of the @angular/core module.
import { Component } from '@angular/core';

To create the component,

ng g c knf_demo_component




Now, if we go and check the file structure, we will get the knf_demo_component new folder created under the src/app folder.

The following files are created in the knf_demo_component folder − 
  • knf-demo-component.component.css
  • knf-demo-component.component.html
  • knf-demo-component.component.spec.ts
  • knf-demo-component.component.ts


Changes are added to the app.module.ts file as follows −
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { KnfDemoComponentComponent } from './knf-demo-component
          /knf-demo-component.component';

@NgModule({
declarations: [
AppComponent,
KnfDemoComponentComponent
],
imports: [
BrowserModule,
AppRoutingModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }


The new knf-demo-component.component.ts file is generated as follows −,
import { Component, OnInit } from '@angular/core';

@Component({
selector: 'app-knf-demo-component',
templateUrl: './knf-demo-component.component.html',
styleUrls: ['./knf-demo-component.component.css']
})
export class KnfDemoComponentComponent implements OnInit {

constructor() { }

ngOnInit(): void {
}

}


The new knf-demo-component.component.html file is generated as follows −,
<p>knf-demo-component works!</p>


More ...

Popular posts from this blog

Learn Java 8 streams with an example - print odd/even numbers from Array and List

Spring boot video streaming example-HTML5

Spring Boot + Mockito simple application with 100% code coverage

Spring Boot + OpenCSV Export Data to CSV Example

Custom Exception Handling in Quarkus REST API

Registration and Login with Spring Boot + Spring Security + Thymeleaf

DataTable-Pagination example with Spring boot, jQuery and ajax

Spring Webflux File Download - REST API Example

Node JS mini projects with source code - free download

ReactJS, Spring Boot JWT Authentication Example