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

Spring boot video streaming example-HTML5

DataTable-Pagination example with Spring boot, jQuery and ajax

10 Best Job Posting Sites 2021-2022

Spring boot web project free download:User Registration System

Spring Boot + JPA/Hibernate One to Many mapping example

5 Hardest Puzzle,100% fail answers

Java security AES,SHA256,SHA512,MD5-Spring Boot Project Free Download

Spring Boot-AngularJS-Bootstrap-JPA-CRUD

ReactJS - Bootstrap - Buttons

Spring Boot file upload/download example