Q: What Is Angular?
Ans: Angular is a platform that makes it easy to build applications with the web. Angular supports MVC pattern, dependency injection, provides declarative templates. Angular applications run on the web, mobile, or the desktop. Angular uses HTML and JavaScript to run application. The code is written in TypeScript, which compiles to JavaScript and displays the same in the browser. Angular itself is written in TypeScript.
Angular is 5 times faster than Angular 1.
Angular is also used in the cross platform mobile development called IONIC and so it is not limited to web apps only.
Q: What is the difference between platform & framework?
Ans: "Platform" refers to the hardware/software upon which a software is built or for which it is destined. It provides tools needed to run an application.
"Framework" refers to a collection of libraries/classes/functions that can be used to build a software.
Angular is 5 times faster than Angular 1.
Angular is also used in the cross platform mobile development called IONIC and so it is not limited to web apps only.
Q: What is the difference between platform & framework?
Ans: "Platform" refers to the hardware/software upon which a software is built or for which it is destined. It provides tools needed to run an application.
"Framework" refers to a collection of libraries/classes/functions that can be used to build a software.
Q: Angular is platform or framework?
Ans: Angular is both platform and framework. Angular 1.x was framework but now Angular is platform also.
Q: When the Angular was first released? Who is called the father of Angular?
Ans: Angular 1 was released in October 2010 as AngularJS. The Father of Angular is Misko Hevery.
Q: What are the languages supported by Angular?
Ans: Following languages can be used to write Angular application:
- ECMAScript 5
- ECMAScript 6 (also called ES 2015)
- TypeScript
- Dart
- PureScript
- Elm etc.
Q: What is ECMAScript?
Ans: The JavaScript language standard is officially called ECMAScript. The first version is ECMAScript 1 and the latest version is ECMAScript 6. Most of the modern browsers available today support ECMAScript 5. The browser support for ECMAScript 6 is still incomplete. However, using a process called Transpilation, ECMAScript 6 can be converted to ECMAScript 5 which is supported by all the modern browsers. ECMAScript 6 is officially known as ECMAScript 2015. ECMAScript 2015 introduced several new features like classes, modules, arrow functions etc.
Q: What is Transpiling?
Ans: Transpiling converts source code from a programming language into an equivalent source code of the same or a different programming language. Babel is a transpiler for JavaScript code.
Q: What is TypeScript?
Ans: TypeScript is a free and open-source programming language developed by Microsoft. It is a superset of JavaScript and compiles to JavaScript through a process called transpilation. Using TypeScript to build angular applications provides several benefits.
- Intellisense
- Autocompletion
- Code navigation
- Advanced refactoring
- Strong Typing
- Supports ES 2015 (also called ES 6) features like classes, interfaces and inheritance.
Q: What Is Architecture Overview of Angular?
Ans: The diagram show the architecture overview of Angular application.
Ans: The diagram show the architecture overview of Angular application.
Following are the main building blocks of an Angular Application:
Q: What Is Bootstrapping in Angular?
Ans: The bootstrapping process creates the components listed in the bootstrap array and inserts each one into the browser (DOM).
Q: What is Webpack in Angular?
Ans: Webpack is a popular module bundler. It is a tool for bundling application source code in convenient chunks and for loading that code from a server into a browser. A bundle is a JavaScript file that incorporates assets that belong together and should be served to the client in a response to a single file request. A bundle can include JavaScript, CSS styles, HTML, and almost any other kind of file.
Q: What are the uses of files created in Angular application?
Ans: Following files are auto generated by Angular CLI while creating an angular application:
rxjs.js: RxJS (Reactive Extensions for JavaScript) is a library for reactive programming using observables that makes it easier to compose asynchronous or callback-based code and provides server-side handling. The library also provides utility functions for creating and working with observables.
zone.js: Update the application view when any change occurred i.e. handle binding like one way, two way.
tslint.json: Setup environment. TSLint checks your TypeScript code for readability, maintainability, and functionality errors. There are 2 tslint.json file in angular project. The one in the project folder is your generic TS lint file that applies globally. The one in the “src” folder is a project specific TS lint file that extends the other one, allowing us to tweak TS lint settings for the specific project.
tsconfig.json: Contains typescript configuration. It specifies the compiler options required to compile the project.
package.json: Handles what packages to be installed. It lists the packages that our project depends on and allows to specify the versions of a package that the project can use using semantic versioning rules.
environment.prod.ts: Used while building the angular application for production.
environment.ts: Used while building the angular application for development. When the application is built (using ng build) or served (using ng serve), the environment.{env}.ts file from “/environments” folder is pulled and replaces the file within “/src/app” folder. By default this is dev.
package-lock.json: Store url location of packages from where they are installed. It is automatically generated for any operations whenever npm modifies either the node_modules tree, or package.json. It describes the exact tree that was generated, such that subsequent installs are able to generate identical trees, regardless of intermediate dependency updates.
angular.json: Stores angular application configuration.
main.ts: To decide that the application can run on browser and which module will be startup module and run first. It is the entry point of the application, compiles the application with just-in-time and bootstraps the application.
app.module.ts: This is the root module. It decide which component will be startup component and sets the links to other modules.
polyfills.ts: Contains few lines of code which make the application compatible for different browsers. The code we write is mostly in ES6 and is not compatible with IE or firefox and needs some environment setups before being able to be viewed or used in these browsers. Polyfills.ts was provided by angular to help you do away with need to specifically setup everything.
karma.conf.ts: Karma is the foundation of testing workflow. It brings together other testing tools to define the framework we want to use, the environment to test under, the specific actions we want to perform, etc. In order to do this, Karma relies on a configuration file named by default karma.conf.js.
index.html: The main view page which runs and contains main component selector tag.
Q: What Is a Template Reference Variable?
Ans: A template reference variable is a way of capturing a reference to a specific element, component, directive, and pipe so that it can be used some place in the same template HTML.
You can use a template reference variable by two ways.
<input type="text" ref-cellnumber> //cellnumber will be a template reference variable. <input #cellnumber placeholder="Cell number">
Q: What are Components?
Ans: A component in Angular is a class with a template and a decorator. So in simple terms a component in Angular is composed of these 3 things.
Q: What is an entryComponent?
Ans: The entryComponents array is used to define only those components that are not found in html and created dynamically using ComponentFactoryResolver. Angular needs this hint to find them and compile. All other components should just be listed in the declarations array.
We can specify entryComponents either by bootstrapping in Angular Module or by router definition. So, there are two main kinds of entryComponents:
Angular automatically adds components specified in the module's bootstrap and route definitions into the entryComponents list.
Q: What is NgModules in Angular?
Ans: The basic building blocks of an Angular application are NgModules, which provide a compilation context for components. An Angular app is defined by a set of NgModules. An app always has at least one root module that enables bootstrapping, and typically has many more feature modules.
The Angular Module (NgModules) helps us to organize an application into connected blocks of functionality.
The NgModule contains following properties:
Q: What are the Types of NgModules?
Ans: There are five types of NgModules –
Features Module – The feature modules are NgModules for the purpose of organizing an application code. It does not import BrowserModule. Feature modules import CommonModule instead of BrowserModule. Feature modules help you partition the app into focused areas.
Routing Module – The Routing is used to manage routes and also enables navigation from one view to another view as users perform application tasks.
Service Module – The modules that only contain services and providers. It provides utility services such as data access and messaging. The root AppModule is the only module that should import service modules. The HttpClientModule is a good example of a service.
Widget Module - The third party UI component libraries are widget modules.
Shared Module – The shared module allows to organize the application code. We can put our commonly used components, directives, and pipes into the one module and use whenever required to this module.
Q: What are the most commonly used NgModules?
Ans: The following are frequently used Angular modules with examples of some of the things they contain:
NgModule |
Import it from |
Use |
BrowserModule |
@angular/platform-browser
|
When we want to run our app in a browser |
CommonModule |
@angular/common |
When we want to use NgIf, NgFor |
FormsModule |
@angular/forms |
When you want to build template driven forms (includes NgModel) |
ReactiveFormsModule |
@angular/forms |
When we want to build reactive forms |
RouterModule |
@angular/router |
When we want to use RouterLink, .forRoot(), and .forChild() |
HttpClientModule |
@angular/common/http |
When we want to talk to a server |
Q: What Is Angular Directives?
Ans: The Angular directives allow us to attach behavior to DOM elements. The @directive decorator provide us an additional metadata that determines how directives should be processed, instantiated, and used at run-time.
Q: What are the Options provided by @Directive Decorator?
Ans: Following are the available options for @Directive Decorator
1. selector - The CSS selector that identifies this directive in a template and triggers instantiation of the directive.
• element-name: Select by element name.
• .class: Select by class name.
• [attribute]: Select by attribute name.
• [attribute=value]: Select by attribute name and value.
• :not(sub_selector): Select only if the element does not match the sub_selector.
• selector1, selector2: Select if either selector1 or selector2 matches.
2. inputs – Enumerates the set of data-bound input properties for a directive. Angular automatically updates input properties during change detection.
3. outputs – The set of event-bound output properties. When an output property emits an event, an event handler attached to that event in the template is invoked.
4. providers – Configures the injector of this directive or component with a token that maps to a provider of a dependency.
5. exportAs – The name or names that can be used in the template to assign this directive to a variable. For multiple names, use a comma-separated string.
6. queries – Configures the queries that will be injected into the directive.
7. jit – If true, this directive/component will be skipped by the AOT compiler and so will always be compiled using JIT.
8. host - Maps class properties to host element bindings for properties, attributes, and events, using a set of key-value pairs.
Q: What are different types of Directives?
Ans: There are three kinds of directives in Angular:
1. Components - directives with a template.
2. Structural directives - change the DOM layout by adding and removing DOM elements.
3. Attribute directives - change the appearance or behavior of an element, component, or another directive.
Components are the most common of the three directives.
Structural Directives change the structure of the view. The built-in Structural Directives are ngFor, ngIf and ngSwitch.
Attribute Directives are used as attributes of elements. The built-in Attribute Directives are ngStyle, ngClass and ngModel.
Q: What are structural directives?
Ans: Structural directives are responsible for HTML layout. They shape or reshape the DOM's structure, typically by adding, removing, or manipulating elements.
As with other directives, we apply a structural directive to a host element. The directive then does whatever it's supposed to do with that host element and its descendants.
Structural directives are easy to recognize. An asterisk (*) precedes the directive attribute name.
Three of the common, built-in structural directives—NgIf, NgFor, and NgSwitch
Q: What are angular life cycle hooks?
Ans: A component/Directive has a lifecycle managed by Angular. Angular creates it, renders it, creates and renders its children, checks it when its data-bound properties change, and destroys it before removing it from the DOM.
Lifecycle sequence
After creating a component/directive by calling its constructor, Angular calls the lifecycle hook methods in the following sequence at specific moments:
Hook
|
Purpose
and Timing
|
ngOnChanges()
|
Respond
when Angular (re)sets data-bound input properties. The method receives
a SimpleChanges object
of current and previous property values.
Called
before ngOnInit() and whenever one or more data-bound input
properties change.
|
ngOnInit()
|
Initialize
the directive/component after Angular first displays the data-bound
properties and sets the directive/component's input properties.
Called once, after the first ngOnChanges().
|
ngDoCheck()
|
Detect and
act upon changes that Angular can't or won't detect on its own.
Called
during every change detection run, immediately after ngOnChanges()and ngOnInit().
|
ngAfterContentInit()
|
Respond
after Angular projects external content into the component's view / the view
that a directive is in.
Called once after
the first ngDoCheck().
|
ngAfterContentChecked()
|
Respond
after Angular checks the content projected into the directive/component.
Called
after the ngAfterContentInit() and
every subsequent ngDoCheck().
|
ngAfterViewInit()
|
Respond
after Angular initializes the component's views and child views / the view
that a directive is in.
Called once after
the first ngAfterContentChecked().
|
ngAfterViewChecked()
|
Respond
after Angular checks the component's views and child views / the view that a
directive is in.
Called
after the ngAfterViewInit() and
every subsequent ngAfterContentChecked().
|
ngOnDestroy()
|
Cleanup
just before Angular destroys the directive/component. Unsubscribe Observables
and detach event handlers to avoid memory leaks.
Called just
before Angular destroys the directive/component.
|
Q: What Are Angular Decorators?
Ans: The Decorators are functions that modify JavaScript classes and it is also used for attaching metadata to classes.
Q: What are the differences between @Component and @Directive?
Ans: The components are used, when we want to create new elements in the DOM with their own HTML template.
The directives are used, when we want to change or update the existing behavior of elements in the DOM.
Q: What is Compiler? Why we need compilation?
Ans: The Angular compiler converts our applications code (HTML and TypeScript) into JavaScript code before browser downloads and runs that code.
The @NgModule metadata plays an important role in guiding the compilation process and also tells the compiler what components to compile for this module and how to link this module with other modules.
The Angular offers two ways to compile our application code-
1. Just-in-Time (JIT) - JIT compiles our app in the browser at runtime (compiles while running). JIT runs every time for every user at runtime using
a different set of libraries.
2. Ahead-of-Time (AOT) - AOT compiles our app at build-time (compiles before running). AOT runs once at build time using one set of
libraries.
The JIT compilation is the default when we run the build or serve CLI commands.
For AOT compilation, we append the --aot flags to build or serve CLI commands.
We need compilation for achieving a higher level of efficiency, performance improvements, faster rendering and also sometimes detect template errors earlier in our Angular applications.
Q: What is the difference between JIT compiler and AOT compiler?
Ans: Following are the differences:
JIT (Just-in-Time) -
1. JIT compiles our app in the browser at runtime.
2. Compiles while running
3. Each file compiled separately
4. No need to build after changing our app code and it automatically reflects the changes in your browser page
5. Highly secure
6. Very suitable for local development
AOT (Ahead-of-Time) -
1. AOT compiles our app code at build time.
2. Compiles before running
3. Compiled by the machine itself, via the command line (Faster)
4. All code compiled together, inlining HTML/CSS in the scripts
5. Highly secure
6. Very suitable for production builds
Q: Dendency Injection (DI)?
Ans: Dependency Injection is a powerful pattern for managing code dependencies. DI is a way to create objects that depend upon other objects. It is a coding pattern in which a class asks for dependencies from external sources rather than creating them itself.
Q: What Is Injectors?
Ans: A service is just a class in Angular until you register with an Angular dependency injector. The injector is responsible for creating angular service instances and injecting them into classes. Angular creates an injector automatically during the bootstrap process. Angular doesn't know automatically how we want to create instances of our services or injector. We must configure it by specifying providers for every service. Actually, providers tell the injector how to create the service and without a provider not able to create the service.
Q: What are @Injectable providers?
Ans: The @Injectable decorator identifies services and other classes that are intended to be injected. To inject the service into a component, Angular provides an Injector decorator: @Injectable(). The @Injectable decorator marks a class as available to an injector for instantiation. An injector reports an error when trying to instantiate a class that is not marked as @Injectable(). Injectors are also responsible for instantiating components. At the run-time, the injectors can read class metadata in the JavaScript code and use the constructor parameter type information to determine what things to inject.
Q: What Is Angular Services?
Ans: Services are commonly used for sharing data and making HTTP calls. The main idea behind a service is to provide an easy way to share the data between the components and with the help of dependency injection (DI) we can control how the service instances are shared. Services use to fetch the data from the RESTful API.
Q: What Is Angular Singleton Service?
Ans: A singleton is a class that allows only a single instance of itself to be created and gives access to that created instance. It contains static variables that can accommodate unique and private instances of itself. It is used in scenarios when a user wants to restrict instantiation of a class to only one object. There are two ways to make a service a singleton in Angular:
1. Declare that the service should be provided in the application root.
2. Include the service in the AppModule or in a module that is only imported by the AppModule.
Beginning with Angular 6.0, the preferred way to create a singleton services is to specify on the service that it should be provided in the application root. This is done by setting “providedIn” to root on the service's @Injectable decorator:
Q: What Is Pipe? Why use Pipes? What Is Pipe Decorator?
Ans: A pipe is a class decorated with pipe metadata. They are a simple way to transform values in an Angular template. The pipe class implements the PipeTransform interface's transform method that accepts an input value followed by optional parameters and returns the transformed value.
Q: What Is PipeTransform interface?
Ans: The Pipe class implements the PipeTransform interface that accepts input value (It is optional parameters) and returns the transformed value. The transform method is an important method to a pipe. To create a Pipe, you must implement this interface.
Q: What are differences between Pure and Impure Pipe?
Ans: There are two categories of pipes: pure and impure. Pipes are pure by default. We can make a pipe impure by setting its pure flag to false.
A pure pipe is only called when Angular detects a pure change in the input value or the parameters passed to a pipe.
For example, Angular ignores changes within (composite) objects. It won't call a pure pipe if you change an input month, add to an input array, or update an input object property.
An impure pipe is called for every component change detection cycle no matter whether the value or parameters changes. An impure pipe is called often, as often as every keystroke or mouse-move. So, Impure pipes are prone to be inefficient.
A pure pipe is only called when Angular detects a pure change in the input value or the parameters passed to a pipe.
For example, Angular ignores changes within (composite) objects. It won't call a pure pipe if you change an input month, add to an input array, or update an input object property.
An impure pipe is called for every component change detection cycle no matter whether the value or parameters changes. An impure pipe is called often, as often as every keystroke or mouse-move. So, Impure pipes are prone to be inefficient.
Q: What are Inbuilt Pipes?
Ans: These are Inbuilt Pipes:
1. DatePipe
Ans: These are Inbuilt Pipes:
1. DatePipe
2. CurrencyPipe
3. AsyncPipe
4. DecimalPipe
5. PercentPipe
6. UpperCasePipe
7. LowerCasePipe
8. TitleCasePipe
9. JsonPipe
10. SlicePipe
11. I18nSelectPipe
12. And many more
3. AsyncPipe
4. DecimalPipe
5. PercentPipe
6. UpperCasePipe
7. LowerCasePipe
8. TitleCasePipe
9. JsonPipe
10. SlicePipe
11. I18nSelectPipe
12. And many more
Q: What Is Parameterizing Pipe?
Ans: A pipe can accept any number of optional parameters to achieve output. The parameter value can be any valid template expressions. To add optional parameters follow the pipe name with a colon (:). Its looks like- currency: 'INR'
Q: What Is Chaining Pipe?
Ans: The chaining Pipe is used to perform the multiple operations within the single expression. This chaining operation will be chained using the pipe (I).
In the following example, to display the birthday in the upper case- will need to use the inbuilt date-pipe and upper-case-pipe.
{{ birthday | date | uppercase }}
Q: What Is Routing and Navigation in Angular?
Ans: The Angular Router enables navigation from one view to the next as users perform application tasks.
The browser has a familiar model of application navigation:
1. Enter a URL in the address bar and the browser navigates to a corresponding page.
2. Click links on the page and the browser navigates to a new page.
3. Click the browser's back and forward buttons and the browser navigates backward and forward through the history of pages you've seen.
The Angular Router ("the router") borrows from this model. It can interpret a browser URL as an instruction to navigate to a client-generated view. It can pass optional parameters along to the supporting view component that help it decide what specific content to present. We can bind the router to links on a page and it will navigate to the appropriate application view when the user clicks a link. We can navigate imperatively when the user clicks a button, selects from a drop box, or in response to some other stimulus from any source. And the router logs activity in the browser's history journal so the back and forward buttons work as well.
Q: What is Angular Router and Router module?
Ans: Router displays the application component for the active URL and Manages navigation from one component to the next.
Router Module is a separate NgModule that provides the necessary service providers and directives for navigating through application views.
Q: What is Routes and Route Properties?
Ans: Routes defines an array of Route, each mapping a URL path to a component. Route represents router configuration. So, Routes is an array of Route configuration. Each route has following properties:
• path is a string that uses the route matcher DSL.
• pathMatch is a string that specifies the matching strategy.
• matcher defines a custom strategy for path matching and supersedes path and pathMatch.
• component is a component type.
• redirectTo is the url fragment which will replace the current matched segment.
• outlet is the name of the outlet the component should be placed into.
• canActivate is an array of DI tokens used to look up CanActivate handlers.
• canActivateChild is an array of DI tokens used to look up CanActivateChild handlers.
• canDeactivate is an array of DI tokens used to look up CanDeactivate handlers.
• canLoad is an array of DI tokens used to look up CanLoad handlers.
• data is additional data provided to the component via ActivatedRoute.
• resolve is a map of DI tokens used to look up data resolvers.
• runGuardsAndResolvers defines when guards and resolvers will be run. By default they run only when the matrix parameters of the route change. Options include:
1. paramsChange (default) - Run guards and resolvers when path or matrix params change. This mode ignores query param changes.
2. paramsOrQueryParamsChange - Guards and resolvers will run when any parameters change. This includes path, matrix, and query params.
3. pathParamsChange Run guards and resolvers path or any path params change. This mode is useful if you want to ignore changes to all optional parameters such as query and matrix params.
• always - Run guards and resolvers on every navigation.
• children is an array of child route definitions.
• loadChildren is a reference to lazy loaded child routes. See LoadChildren for more info.
Q: What Is Router outlet?
Ans: Router Outlet <router-outlet> is a directive that marks where the router displays a view.
Q: What Is Angular Router link?
Ans: The routerLink directive is for binding a clickable HTML element to a route. Clicking an element with a routerLink directive that is bound to a string or a link parameters array triggers a navigation.
Q: What Is RouterLinkActive in Angular?
Ans: The directive for adding/removing classes from an HTML element when an associated routerLink contained on or inside the element becomes active/inactive.
Q: What Is RouterState in Routers?
Ans: The routerState is the current state of the router including a tree of the currently activated routes together with convenience methods for traversing the route tree.
Q: What Is ActivatedRoute in Routes?
Ans: ActivatedRoute is a service that is provided to each route component that contains route specific information such as route parameters, static data, resolve data, global query params, and the global fragment.
Q: What Is Router events in Angular?
Ans: During each navigation, the Router emits navigation events through the Router.events property. These events range from when the navigation starts and ends to many points in between. The full list of navigation events is displayed in the table below.
Router Event |
Description |
NavigationStart |
An event triggered when navigation starts. |
RouteConfigLoadStart
|
An event triggered before the Router lazy loads a route configuration. |
RouteConfigLoadEnd |
An event triggered after a route has been lazy loaded. |
RoutesRecognized
|
An event triggered when the Router parses the URL and the routes are recognized. |
GuardsCheckStart
|
An event triggered when the Router begins the Guards phase of routing. |
ChildActivationStart
|
An event triggered when the Router begins activating a route's children. |
ActivationStart |
An event triggered when the Router begins activating a route. |
GuardsCheckEnd
|
An event triggered when the Router finishes the Guards phase of routing successfully. |
ResolveStart
|
An event triggered when the Router begins the Resolve phase of routing. |
ResolveEnd
|
An event triggered when the Router finishes the Resolve phase of routing successfuly. |
ChildActivationEnd
|
An event triggered when the Router finishes activating a route's children. |
ActivationEnd |
An event triggered when the Router finishes activating a route. |
NavigationEnd |
An event triggered when navigation ends successfully. |
NavigationCancel
|
An event triggered when navigation is canceled. This is due to a Route Guard returning false during navigation. |
NavigationError
|
An event triggered when navigation fails due to an unexpected error. |
Scroll
|
An event that represents a scrolling event. |
Q: What Is HttpClient in Angular?
Ans: HttpClient is an improved replacement for HTTP. The new HttpClient service is included in the HTTPClient Module that is used to initiate HTTP request and responses in angular apps. The HttpClientModule is a replacement of HttpModule. HttpClient also gives us advanced functionality like the ability to listen for progress events and interceptors to modify requests or responses. Before using the HttpClient, we must need to import the Angular HttpClientModule and the HttpClientModule is imported from @angular/common/http. We must import HttpClientModule after BrowserModule in our angular apps.
Q: What Is Angular HttpInterceptor?
Ans: HttpInterceptors is an interface which uses to implement the intercept method. Intercepts is an advanced feature that allows us to intercept each request/response and modify it before sending/receiving. Interceptors capture every request and manipulate it before sending and also catch every response and process it before completing the call.
Q: What Are Angular HttpHeaders?
Ans: Immutable set of Http headers, with lazy parsing. HttpHeaders class contains the list of methods -
1. has() - Checks for existence of header by given name.
2. get() - Returns the first header that matches given name.
3. keys() - Returns the names of the headers
4. getAll() - Returns list of header values for a given name.
5. append() - Append headers by chaining.
6. set() - To set a custom header on the request for a given name
7. delete() - To delete the header on the request for a given name
Q: How to catch and log specific Angular errors in the app?
Ans: Angular provide “ErrorHandler” module that provides a hook for centralized exception handling. The default implementation of ErrorHandler prints error messages to the console. To intercept error handling, write a custom exception handler that replaces this default as appropriate for the app.
Q: What Are Validator functions - Async and Sync Validators?
Ans: There are two types of validator functions which are the following -
1. Async validators
2. Sync validators
Async validator functions that take a control instance and return an observable that later emits a set of validation errors or null.
Sync validator functions that take a control instance and return a set of validation errors or null.
Angular runs only Async validators due to some performance issues.
What Is Angular Cookie?
Ans: A cookie is a small piece of data sent from a website and stored on the user's machine by the user's web browsers while the user is browsing.
OR
Cookies are small packages of information that are typically stored in the browsers and websites tend to use cookies for multiple things.
Cookies persist across multiple requests and browser sessions. They can be a great method for authentication in some web apps.
Q: What are the cookies methods?
Ans: The all cookie methods are
1. Check – This method is used to check the cookie existing or not.
2. Get - This method returns the value of given cookie name.
3. GetAll - This method returns a value object with all the cookies
4. Set – This method is used to set the cookies with a name.
5. Delete – This method used to delete the cookie with the given name
6. deleteAll – This method is used to delete all the cookies
7. and so on
Q: What is <ng-template>?
Ans: <ng-template> is used with angular *ngIf directive to display else template. <ng-template> is a virtual element and its contents are displayed only when needed (based on conditions). <ng-template> should be used along with structural directives like [ngIf], [ngFor], [NgSwitch] or custom structural directives.
In the following example, if lessons is false then loading template will be displayed.
<div class="lessons-list" *ngIf="lessons else loading">
...
</div>
<ng-template #loading>
<div>Loading...</div>
</ng-template>
No comments:
Post a Comment