VZhyrytskiy / An2-02.1-Components-Demo

How to use Angular Components and Directives. Demo project. Angular v.7

Angular Components Demo Project

Agenda

1. What is Angular App?

2. What is a Model?

3. AppComponent

4. AppModule

5. Bootstrap Application and Show Single Data

6. Template Epressions

7. Show a Collection

8. Communication

   8.1. Inputs/Outputs

   8.2. Output Event Directive

   8.3. ViewChild, ViewChildren

   8.4. ExportAs

   8.5. Service Communication (Push)

   8.6. Service Communication (Pull)

   8.7. Both component input and directive have the same name

9. Types Of Bindings

10. Content Security

11. Host Element

12. Projection

13. Styling Components

14. Component Lifecycle Hooks

    14.1. OnInit, OnDestroy

    14.2. OnChanges

    14.3. DoCheck Object, DoCheck Array

    14.4. Afters

    14.5. AfterViewXXX

    14.6. AfterContentX

15. Dynamic Component Loading

16. Change Detection Strategy

To run this project type: npm install, ng s -o in your command line tool.

This project was generated with angular-cli version 8.0.0

Development server

Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

Code scaffolding

Run ng generate component component-name to generate a new component. You can also use ng generate directive/pipe/service/class.

Build

Run ng build to build the project. The build artifacts will be stored in the dist/ directory. Use the --prod flag for a production build.

Running unit tests

Run ng test to execute the unit tests via Karma.

Running end-to-end tests

Run ng e2e to execute the end-to-end tests via Protractor. Before running the tests make sure you are serving the app via ng serve.

Deploying to Github Pages

Run ng github-pages:deploy to deploy to Github Pages.

Further help

To get more help on the angular-cli use ng --help or go check out the Angular-CLI README.