Angular 2 is an open source JavaScript framework to build web applications in HTML and JavaScript and has been conceived as a mobile first approach. Angular 2 is the next version of Google’s massively popular MV* framework for building complex applications in the browser. Angular 2 also provides additional features and capabilities, such as robust support for mobile development, easy object orientation, reusable components.
COMPONENTS:
In Angular 2, “everything is a component.” Components are the main way to build and specify elements and logic on the page, through both custom elements and attributes that add functionality to our existing components.
Example :
@Component({selector: 'greet', template: 'Hello {{name}}!'})
class Greet {
name: string = 'World';
}
Component decorator allows you to mark a class as an Angular component and provide additional metadata that determines how the component should be processed, instantiated and used at runtime.
APP LIFECYCLE:
Angular apps go through a multi-stage bootstrap and lifecycle process, and we can respond to various events as our app starts, runs, and creates/destroys components.
BOOTSTRAP: Angular 2 apps (currently) need to be bootstrapped using the root component for the app. This component is where you can put application-level code and configuration, and its template is where the whole app component chain gets created.
COMPONENT INIT: When a component is created, its constructor is called. This is where we initialize state for our component, but if we rely on properties or data from child components, we need to wait for our child components to initialize first. To do this, we can handle the ngOnInit lifecycle event. Optionally, we could call setTimeout in our constructor for a similar effect.
ANGULAR 2 EVENTS:
Events in Angular 2 use the parentheses notation in templates, and trigger methods in a component’s class.
Example, assume we have this component class:
@Component(...)
class MyComponent {
clicked(event) {
}
}
And this template:
clicked() method will be called when the button is clicked.
To capture the event object, pass $event as a parameter in the event callback from the template.
FORMS:
In Angular 2, we more explicitly build forms and form controls. The FormBuilder in angular 2 makes it easy for us to specify form controls and the various validators we might want to apply to certain controls. The FormBuilder creates instances of FormGroup. Instead of using the FormBuilder, we could also construct the FormGroup manually.
Example:
import { FormGroup, FormControl } from '@angular/forms';
public loginForm = new FormGroup({
email: new FormControl("email", Validators.required),
password: new FormControl("password", Validators.required)
});