The last time I use Angular2, the directives are still present, but now there are so-called declarations in app.modules.ts. The question is, if I am going to use the directive only in a specific component, and not mainly, how can I do this?
customers.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-customers',
templateUrl: 'app/customer/customers.component.html'
})
export class CustomersComponent {
customers = [
{ id: 1, name: 'Mix'},
{ id: 2, name: 'Ian'},
{ id: 3, name: 'Aniel'},
{ id: 4, name: 'Jess'},
{ id: 5, name: 'Jusi'},
];
}
customer.component.ts
import { Component, Input } from '@angular/core';
@Component({
selector: 'app-customer',
templateUrl: 'app/customer/customer.component.html'
})
export class CustomerComponent {
@Input() customer: {id: number, name: string};
myColor = 'gray';
}
app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { CustomerComponent } from './customer/customer.component';
import { CustomersComponent } from './customer/customers.component';
@NgModule({
imports: [ BrowserModule, FormsModule ],
declarations: [ AppComponent, CustomerComponent, CustomersComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
I think that when I put a component in an ad, each component can access it, in contrast, I can only declare it in a specific one. Please correct me if I am wrong and please suggest if there is a better alternative in declaring directives.