191. How do you select an element in component template?
You can control any DOM element via ElementRef by injecting it into your component's constructor. i.e, The component should have constructor with ElementRef parameter,
```javascript
constructor(myElement: ElementRef) {
el.nativeElement.style.backgroundColor = 'yellow';
}
```
192. What is TestBed?
TestBed is an api for writing unit tests for Angular applications and it's libraries. Even though We still write our tests in Jasmine and run using Karma, this API provides an easier way to create components, handle injection, test asynchronous behaviour and interact with our application.
193. What is protractor?
Protractor is an end-to-end test framework for Angular and AngularJS applications. It runs tests against your application running in a real browser, interacting with it as a user would.
```javascript
npm install -g protractor
```
194. What is collection?
Collection is a set of related schematics collected in an npm package. For example, `@schematics/angular` collection is used in Angular CLI to apply transforms to a web-app project. You can create your own schematic collection for customizing angular projects.
195. How do you create schematics for libraries?
You can create your own schematic collections to integrate your library with the Angular CLI. These collections are classified as 3 main schematics,
1. **Add schematics:** These schematics are used to install library in an Angular workspace using `ng add` command.
For example, @angular/material schematic tells the add command to install and set up Angular Material and theming.
2. **Generate schematics**: These schematics are used to modify projects, add configurations and scripts, and scaffold artifacts in library using `ng generate` command.
For example, @angular/material generation schematic supplies generation schematics for the UI components. Let's say the table component is generated using `ng generate @angular/material:table `.
3. **Update schematics:** These schematics are used to update library's dependencies and adjust for breaking changes in a new library release using `ng update` command.
For example, @angular/material update schematic updates material and cdk dependencies using `ng update @angular/material` command.
196. How do you use jquery in Angular?
You can use jquery in Angular using 3 simple steps,
1. Install the dependency: At first, install the jquery dependency using npm
```cmd
npm install --save jquery
```
2. Add the jquery script: In Angular-CLI project, add the relative path to jquery in the angular.json file.
```javascript
"scripts": [
"node_modules/jquery/dist/jquery.min.js"
]
```
3. Start using jquery: Define the element in template. Whereas declare the jquery variable and apply CSS classes on the element.
```html
<div id="elementId">
<h1>JQuery integration</h1>
</div>
```
```javascript
import {Component, OnInit} from '@angular/core';
declare var $: any; // (or) import * as $ from 'jquery';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
ngOnInit(): void {
$(document).ready(() => {
$('#elementId').css({'text-color': 'blue', 'font-size': '150%'});
});
}
}
```
197. What is the reason for No provider for HTTP exception?
This exception is due to missing HttpClientModule in your module. You just need to import in module as below,
```javascript
import { HttpClientModule } from '@angular/common/http';
@NgModule({
imports: [
BrowserModule,
HttpClientModule,
],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
```
198. What is router state?
The RouteState is an interface which represents the state of the router as a tree of activated routes.
```javascript
interface RouterState extends Tree {
snapshot: RouterStateSnapshot
toString(): string
}
```
You can access the current RouterState from anywhere in the Angular app using the Router service and the routerState property.
199. How can I use SASS in angular project?
When you are creating your project with angular cli, you can use `ng new`command. It generates all your components with predefined sass files.
```javascript
ng new My_New_Project --style=sass
```
But if you are changing your existing style in your project then use `ng set` command,
```javascript
ng set defaults.styleExt scss
```
200. What is the purpose of hidden property?
The hidden property is used to show or hide the associated DOM element, based on an expression. It can be compared close to `ng-show` directive in AngularJS. Let's say you want to show user name based on the availability of user using `hidden` property.
```javascript
<div [hidden]="!user.name">
My name is: {{user.name}}
</div>
```
Comments
Post a Comment
please do not enter any spam link in the comment box