Welcome to the new concept of components in angular 4.
Definition: component is a angular class , Components are the most basic building block of an UI in an Angular application. An Angular application is a tree of Angular components.
Components always have a template and only one component can be instantiated per an element in a template.
A component must belong to an NgModule in order for it to be usable by another component or application. To specify that a component is a member of an NgModule, you should list it in the declarations field of that NgModule In app.module file.
Component:
First We need to import the angular Component from the Angular package: @angular/core
import { Component } from ‘@angular/core’;we will use this component with the component decorator @component
component decorator must have the selector and template.
Selector : css selector that identifies this component in a template. means we can use the html templates with selector in the application.
selector: ‘app’,
Template: inline-defined template for the view. Means it’s the html code, we can write html code in the template, or we can directly give the html src by giving the template url.
template: `{{title}}`,TemplateUrl: Template url is the external file containing a html template for the view.
templateUrl: ‘./app.component.html’
Same as styles: css styles we can add two ways by adding styles, styleUrls.
Style: nline-defined styles to be applied to this component’s view
styles: [‘h1 { font-weight: normal; }’]styleUrls: list of urls to stylesheets to be applied to this component’s view. If we have multiple styles we can add by the external css files.
styleUrls: [‘./app.component.css ]
Component Structure:
import { Component } from ‘@angular/core’;
@Component({
selector: ‘app’,
template: ‘Hello <h4>{{title}}</h4>!’,
styles: [‘h4 { font-weight: normal; }’]
})
export class welcome { title: string = ‘World’; }Module:
Every Angular app has at least one NgModule class, the root module, conventionally named AppModule lar apps are modular and Angular has its own modularity system called NgModules. We will add the components in the declarations of this module file.
Import statement for the module:
import { NgModule } from ‘@angular/core’;NgModule is a decorator to use the ng module.
most important properties are:
- declarations– the view classes that belong to this module. Angular has three kinds of view classes: components, directives, and pipes.
- exports– the subset of declarations that should be visible and usable in the component templates of other modules.
- imports– other modules whose exported classes are needed by component templates declared in this
- providers– creators of services that this module contributes to the global collection of services; they become accessible in all parts of the app.
bootstrap – the main application view, called the root component, that hosts all other app views. Only the root module should set this bootstrap property.
Module Structure:
import { NgModule } from ‘@angular/core’;
import { BrowserModule } from ‘@angular/platform-browser‘;
@NgModule({
imports: [ BrowserModule ],
providers: [ Logger ],
declarations: [ AppComponent ],
exports: [ AppComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }The module declares some objects to be public by marking them with the export key word.
Main.ts:
Launch an application by bootstrapping its root module. During development you’re likely to bootstrap the AppModule in a main.ts file like this one
import { platformBrowserDynamic } from ‘@angular/platform-browser-dynamic’;
import { AppModule } from ‘./app/app.module’;
platformBrowserDynamic().bootstrapModule(AppModule);Source code present in the Github
https://github.com/Sathishchary/angular-app/
| Published on Web Code Geeks with permission by Ramesh Kotha, partner at our WCG program. See the original article here: Angular 4: Component Example Opinions expressed by Web Code Geeks contributors are their own. |
Very poor english. How come the WCG team let this be published as is ?