Create custom component in angular 4

Create custom component in angular 4

We can create component using IDE or command line. for using command line, below is the procedure:

Go to angular project and type below command

ng g component <name_of_component>

The folder structure will be as shown in below image:

this component automatically get added in app.module.ts as shown in below image:

Flow of component at backend:

1. We call selector from index.html
2. it is going to main.ts file where it see bootstrapModule configured.
3. then it go to app.module.ts where it looks which bootstrap configured.

and when parent component get called, all child(Custom components) gets loaded.

Angular 4 project structure

Angular 4 project structure

1. tslint.js - for project code check  structure at runtime

2.tsconfig.json - for typescript  configuration. angular 4 uses typescript language which is superset of javascript.

3. protractor.conf.js - for testing configuration

4.package.json  - all the module dependencies needed for the app. once added, do npm install

5. karmma.conf.js - for test runner - uses jasmine framework.

6. angular-cli.json - for all folder structure  configuration of project 

7. main.ts - default setting for angular cli

8. polyfills.ts - backward compatibility for browser

9. style.css - for all css configuration

10. tests.ts - for all unit testing

11. tsconfig-app.json - for configuration how our app should be compiled

12. app.module.ts - parent module of whole angular app. used for importing libraries.

13. app.component.ts - for declaring component. component must have html, css and ts in order to have whole component.

14. app.component.spec.ts - name of unit testing file. all unit tests are writtten here.

15. app.component.html - binding title element 

16. app.component.css - for customized css of component

17. assets folder - for audio video image files.

18. environment folder - for environment specific cconfigurtion like dev qa and production