Angular Interview Questions and Answers
Question - 101 : - What is interpolation?
Answer - 101 : -
Interpolation is a special syntax that Angular converts into property binding. It’s a convenient alternative to property binding. It is represented by double curly braces({{}}). The text between the braces is often the name of a component property. Angular replaces that name with the string value of the corresponding component property.
Let's take an example,
{{title}}
In the example above, Angular evaluates the title and url properties and fills in the blanks, first displaying a bold application title and then a URL.
Question - 102 : - What are template expressions?
Answer - 102 : -
A template expression produces a value similar to any Javascript expression. Angular executes the expression and assigns it to a property of a binding target; the target might be an HTML element, a component, or a directive. In the property binding, a template expression appears in quotes to the right of the = symbol as in [property]="expression". In interpolation syntax, the template expression is surrounded by double curly braces. For example, in the below interpolation, the template expression is {{username}},
{{username}}, welcome to Angular
The below javascript expressions are prohibited in template expression
assignments (=, +=, -=, ...)
new
chaining expressions with ; or ,
increment and decrement operators (++ and --)
Question - 103 : - What are template statements?
Answer - 103 : -
A template statement responds to an event raised by a binding target such as an element, component, or directive. The template statements appear in quotes to the right of the = symbol like (event)="statement".
Let's take an example of button click event's statement
In the above expression, editProfile is a template statement. The below JavaScript syntax expressions are not allowed.
- new
- increment and decrement operators, ++ and --
- operator assignment, such as += and -=
- the bitwise operators | and &
- the template expression operators
Question - 104 : - What are pipes?
Answer - 104 : -
A pipe takes in data as input and transforms it to a desired output. For example, let us take a pipe to transform a component's birthday property into a human-friendly date using date pipe.
import { Component } from '@angular/core';
@Component({
selector: 'app-birthday',
template: `
Birthday is {{ birthday | date }}
`
})
export class BirthdayComponent {
birthday = new Date(1987, 6, 18); // June 18, 1987
}
Question - 105 : - What is a parameterized pipe?
Answer - 105 : -
A pipe can accept any number of optional parameters to fine-tune its output. The parameterized pipe can be created by declaring the pipe name with a colon ( : ) and then the parameter value. If the pipe accepts multiple parameters, separate the values with colons. Let's take a birthday example with a particular format(dd/MM/yyyy):
import { Component } from '@angular/core';
@Component({
selector: 'app-birthday',
template: `
Birthday is {{ birthday | date:'dd/MM/yyyy'}}
` // 18/06/1987
})
export class BirthdayComponent {
birthday = new Date(1987, 6, 18);
}