1.What Is an Angular Component?
Components are like the basic building block in an Angular application. Components are defined using the @component decorator. A component has a selector, template, style and other properties, using which it specifies the metadata required to process the component.An Angular application is a tree of Angular components. Angular components are a subset of directives. Unlike directives, components always have a template and only one component can be instantiated per an element in a template.
2.Angularjs vs Angular
Angularjs and Angular should be treated as two different frameworks.Here are few comparisons as below
|AngularJS is based on model-view-controller Design.The model is the central component that expresses the application’s behavior and manages its data, logic, and rules. The view generates an output based on the information in the model. The controller accepts input, converts it into commands and sends the commands to the model and the view||Angular 2, controllers and $scope were replaced by components and directives. Components are directives with a template. They deal with a view of the application and logic on the page. There are two kinds of directives in Angular 2. These are structural directives that alter the layout of the DOM by removing and replacing its elements, and attributive directives that change the behavior or appearance of a DOM element.|
|To bind an image/property or an event with AngularJS, you have to remember the right ng directive.||Angular focuses on “( )” for event binding and “[ ]” for property binding.|
|No Mobile Support||Angular 2 and 4 both feature mobile support.|
|2-way binding, AngularJS reduced the development effort and time. However, by creating more processing on the client side, page load was taking considerable time.||Angular implements unidirectional tree-based change detection and uses Hierarchical Dependency Injection system. This significantly boosts performance for the framework.|
3.What are Directives
Directives are something that introduce new syntax / markup. They are markers on the DOM element which provides some special behavior to DOM elements and tells AngularJS’s HTML compiler to attach.
There are three kinds of directives in an Angular 2 application.
Angular Component also refers to a directive with a template which deals with View of the Application and also contains the business logic. It is very useful to divide your Application into smaller parts. In other words, we can say that Components are directives that are always associated with the template directly.
Structural directives are able to change the behavior of DOM by adding and removing DOM elements. The directive NgFor, NgSwitch, and NgIf is the best example of structural directives.
Attribute directives are able to change the behavior of DOM. The directive NgStyle is an example of Attribute directives which are used to change styles elements at the same time.
4.Difference between Component and Directive
|They are used to create behavior to an existing DOM element.||It used to shadow DOM to create encapsulates visual behavior. It is used to create UI widgets.|
|They help us to create re-usable components||It helps us to break up our application in smaller component|
|We cannot create pipes using Attribute / Structural directive||Pipes can be defined by component|
|We can define many directive per DOM element||We can present only one component per DOM element|
|@directive keyword is used to define metadata||@component keyword is used to define metadata|
For the Directives there are three hooks provided for different event based on which we can take actions upon
ngOnChanges – It occurs when Angular sets data bound property. Here, we can get current and previous value of changed object. It is raised before the initialization event for directive.
ngOnInit – It occurs after Angular initializes the data-bound input properties.
ngDoCheck – It is raised every time when Angular detects any change.
ngOnDestroy – It is used for cleanup purposes and it is raised just before Angular destroys the directive. It is very much important in memory leak issues by un-subscribing observables and detaching event handlers.
6.What is the Difference between One way Data Binding and Two Way Data Binding
In one-way data binding, the value of the Model is inserted into an HTML (DOM) element and there is no way to update the Model from the View. In two-way binding automatic synchronization of data happens between the Model and the View (whenever the Model changes it will be reflected in the View and vice-versa)
7.What is Interpolation?
Interpolation(one-way data binding) allows you to define properties in a component class, and communicate these properties to and from the template.
8.What is EventBinding?
EventBinding(one-way data binding)
9.What is PropertyBinding?
PropertyBinding(one-way data binding)
10.What is Two-Way Binding?