ng new <project name>
Top
Index
NgModule decorator metadata
@NgModule({
declarations: [], // array of components, pipes, directives which the module will use (private to the module)
imports: [], // array of modules which the module will use
exports: [], // array of modules which the module will export
providers: [], // an array of services which will be injected into the module (globally visible)
bootstrap: [] // in AppModule sets the root component
})
Top
Index
Component decorator metadata
@Component({
// common
selector: '', // css selector that identifies this component in a template
styleUrls: [], // list of urls to stylesheets to be applied to this component's view
styles: '', // inline-defined styles to be applied to this component's view
template: '', // inline-defined template for the view
templateUrl: [], // url to an external file containing a template for the view
// less used
animations: [], // list of animations of this component
changeDetection: [], // change detection strategy used by this component
encapsulation: '', // style encapsulation strategy used by this component
entryComponents: [], // list of components that are dynamically inserted into the view of this component
exportAs: '', // name under which the component instance is exported in a template
host: '', // map of class property to host element bindings for events, properties and attributes
inputs: [], // list of class property names to data-bind as component inputs
interpolation: [], // custom interpolation markers used in this component's template
moduleId: '', // ES/CommonJS module id of the file in which this component is defined
outputs: [], // list of class property names that expose output events that others can subscribe to
providers: [], // list of providers available to this component and its children
queries: [], // configure queries that can be injected into the component
viewProviders: [], // list of providers available to this component and its view children
})
Top
Index
npm install --save bootstrap
to use bootstrap styles edit angualr-cli.json
...
"apps": [
{
...
"styles": [
"styles.css",
"../node_modules/bootstrap/dist/css/bootstrap.min.css"
],
...
}
...
Top
Index
starting and loading an Angular app
main.ts loads AppModule from app.module.ts
AppModule sets its root element by bootstrapping AppComponent from app.component.ts
AppComponent provides the HTML and styles which are used between the selector tags in index.html
Top
Index
creating components using CLI
ng generate component <component name>
ng g c <component name>
command creates a new folder with files and updates AppConfig
x.component.css
x.component.html
x.component.spec.ts
x.component.ts
Top
Index