Angular Custom Components _angular

Custom Component Http://www.ngui.cc/news/show-103.html

In angular, we can create custom components by Component adorners and custom component classes. Basic knowledge defines the meta information of a component

In angular, we can use the Component adorner to define meta information for a component:

@Component ({
  

  Template: ' 
Defining component Classes
Export class Appcomponent  {
  name = ' angular '; 
}
Defining data interfaces
An interface in typescript is a very flexible concept that is often used to describe object shape (shape), in addition to being able to abstract part of a class's behavior.

Interface person {
  name:string;
  Age:number;
 
Let Semlinker:person = {
  name: ' Semlinker ',
  age:31};
Custom Component Example Create Usercomponent component
 
@Component ({
    selector: ' Sl-user ',
    Template: '
    
 
Export class Usercomponent {
    name = ' Semlinker ';
    Address = {
        province: ' Fujian ', City
        : ' Xiamen '};
Declaring Usercomponent Components
. Import {usercomponent} from './user.component ';
 
@NgModule ({
  imports:      [browsermodule],
  declarations: [Appcomponent, Usercomponent],
  Bootstrap :    [Appcomponent]
 
Export class Appmodule {}
Using the Usercomponent component
Import {Component} from ' @angular/core ';
 
@Component ({
  selector: ' My-app ',
  Template: '
    <sl-user></sl-user> '
  ,
 
Export class Appcomponent {}
Initializing data using constructors
 
Export class Usercomponent {
    name:string;
    
 
Constructor () {
 
            
 
this.address = {
            province: ' Fujian ', City
            : ' Xiamen '
    }}
}
Interface uses an example to define an address interface
interface Address {province:string;
    city:string;
}
Using the Address interface
Export class Usercomponent {
    name:string;
    address:address; // ... }