Getting Started
to create a new project
    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

install bootstrap
    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

n4jvp.com