Angular Components Demo Project
Agenda
-
What is Angular App?
-
What is a Model?
-
AppComponent
-
AppModule
-
Bootstrap Application and Show Single Data
-
Template Epressions
-
Show a Collection
-
Communication
8.1. Inputs
8.2. Events (Outputs)
8.3. DOM Events
8.4. Custom Events / Outputs
8.5. Access via template reference variable
8.6. Sibling Communication
-
Types Of Bindings
-
Content Security
-
Host Element
-
Projection
-
Styling Components
-
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
-
Dynamic Component Loading
-
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 1.6.3 and updated to v6
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.