Guide to Angular

 All you need to know about Angular

 What is Angular??

Angular is an amazing platform and  an open-source front end  framework for building single-page client applications .It uses HTML, CSS and Typescript.  It is developed by Google and has an MIT license.

What is Typescript?

It is a superscript of Javascript. It is used because it reduces bugs and provides an increased ability to confidently refactor your code. 

Getting started with angular

Step 1: To install the Angular CLI, open a terminal window and run the following command:

               npm install -g @angular/cli

Step 2:  Then you can build your website give command

               ng new appName

             The CLI creates a new workspace and a simple Welcome app, ready to run.

Step 3:  Run your application by giving the following commands

             cd appName

             ng serve --o

                    http://localhost:4200/ opens up

           If setup was successful you will get a following page

               This is a default setup provided by angular

 

Understanding Angular in depth

You will be able to see app-component and .firebasesrc and many more files

Each component has an html file, css file , ts file and a spec file . Mostly we do not make changes in the spec file.

You can create many more components of your choice using command

                                           ng g c path/componentName

A parent component can pass data to its child by binding the values to the child's component. So,  a child component can pass data to its parent by emitting events.

In short Data communication in angular can be implemented in the below mentioned ways: -

1. Parent to child using @Input() decorator.

2. Child to the parent component using @Output() decorator.

3. Between sibling components (child-child, parent-parent) using @Input() and @Output() decorators.

4. ViewChild() decorator is also used for the same purpose. 

5. Further Services and Interfaces can be used for centralising data and making sharing easier. 

You can create child components in angular using the same command .  You will have to be careful while mentioning the path

                                          ng g c parentComponent/childComponentName

You can create ervices in angular using:

                                          ng g service parentComponent/childComponentName

 pass data to its child by binding the values to the child's component property. A child component has no knowledge of where the data came from. A child component can pass data to its parent (without knowing who the parent is) by emitting events.