Angular Interview Questions – Part 1

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { StudentComponent } from './student/student.component';

@NgModule({
  declarations: [
    AppComponent,
    StudentComponent,
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

2. Write a component with inbuilt css styles.

import { Component } from '@angular/core';
@Component({
    selector: 'my-employee',
    templateUrl: 'app/employee/employee.component.html',
    styles: ['table { color: #369; font-family: Arial, Helvetica, sans-serif; font-size: large; border-collapse: collapse;}', 'td {border: 1px solid black; }']
})
export class EmployeeComponent {
    firstName: string = 'Tom';
    lastName: string = 'Hopkins';
    gender: string = 'Male';
    age: number = 20;
}

import { Component } from '@angular/core';

@Component({
    selector: 'my-app',
    template: `<div>
                    <h1>{{pageHeader}}</h1>
                    <img src='{{imagePath}}'/>
                </div>`
})
export class AppComponent {
    pageHeader: string = 'Employee Details';
    imagePath: string = 'http://pragimtech.com/images/logo.jpg';
}

import { Component } from '@angular/core';

@Component({
    selector: 'my-app',
    template: `<div>
                    <h1>{{'Full Name = ' + getFullName()}}</h1>
                </div>`
})
export class AppComponent {
    firstName: string = 'Tom';
    lastName: string = 'Hopkins';

    getFullName(): string {
        return this.firstName + ' ' + this.lastName;
    }
}

<button disabled='{{isDisabled}}'>Click Me</button>

<button [disabled]='{{isDisabled}}'>Click Me</button>

What is the difference between HTML element attribute and DOM property

1. Attributes are defined by HTML, where as properties are defined by the DOM.
2. Attributes initialize DOM properties. Once the initialization complete, the attributes job is done.
3. Property values can change, where as attribute values can’t.
Let’s prove this point – Property values change, but the attribute values don’t with an example.

In the example below, we have set the value attribute of the input element to Tom.
<input id=’inputId’ type=’text’ value=’Tom’>

At this point, run the web page and in the textbox you will see ‘Tom’ as the value.

Launch the browser developer tools.

On the ‘Console’ tab, use the getattribute() method and value property of the input element to get the attribute and property values. Notice at the moment both have the value ‘Tom’

Change the value in the textbox to Mary.

Notice now, when we query for the attribute and property values, the attribute value is still Tom but the property value is Mary. So this proves the point – Property values change, whereas attribute values.

So it is important to keep in mind that,
1. Attribute initialize DOM property. Once the initialization complete the attribute job is done.
2. Property values can change whereas attribute value can’t.

11. How to send data from parent component to child component?

@Input to be used where we want to pass the variable value from parent component to nested component.
Define the parameters uin nested component

import { Component, Input } from '@angular/core';

@Component({
    selector: 'employee-count',
    templateUrl: 'app/employee/employeeCount.component.html',
    styleUrls: ['app/employee/employeeCount.component.css']
})
export class EmployeeCountComponent {
    @Input()
    all: number;

    @Input()
    male: number;

    @Input()
    female: number;
}

Write below methods in parent component to get the count

getTotalEmployeesCount(): number {
        return this.employees.length;
    }

    getMaleEmployeesCount(): number {
        return this.employees.filter(e => e.gender === 'Male').length;
    }

    getFemaleEmployeesCount(): number {
        return this.employees.filter(e => e.gender === 'Female').length;
    }

Define the variable name and its associated method to get the count in parent component.

<employee-count [all]="getTotalEmployeesCount()"
                [male]="getMaleEmployeesCount()"
                [female]="getFemaleEmployeesCount()">
</employee-count>

export class ChildComponent {
    count = 0;
     increment() {
        this.count++;
      }
    decrement() {
        this.count--;
    }
}

<button (click)="child.increment()">Increment</button>
        <button (click)="child.decrement()">decrement</button>
        <child-component #child></child-component>

<p> current count is {{child.count}} </p>
        <button (click)="increment()">Increment</button>
        <button (click)="decrement()">decrement</button>
        <child-component></child-component>`

export class AppComponent {
  title = 'Parent calls an @ViewChild()';

  @ViewChild(ChildComponent) child: ChildComponent; //using child component reference to call its methods

  increment() {
    this.child.increment();
  }

  decrement() {
    this.child.decrement();
  }

@Output()
countRadioButtonEventEmitter: EventEmitter<string> = new EventEmitter<string>();

onRadioButtonSelectionChnage() {
    console.log('selectedRadioButton : ' + this.selectedRadioButton);
    this.countRadioButtonEventEmitter.emit(this.selectedRadioButton);
  }

<input type="radio" name="options" value="All"
[(ngModel)]="selectedRadioButton"
(change)="onRadioButtonSelectionChnage()"/>
<span class="radioClass">{{"All(" + all + ")"}}</span>

<app-employeecounter [all]="getAllEmployee()"
 [male]="getMaleEmployee()"
 [female]="getFemaleEmployee()"
 (countRadioButtonEventEmitter)="onEmployeeCountRadioButtonChange($event)">
</app-employeecounter>

onEmployeeCountRadioButtonChange(selectedRadioButtonValue: string): void {
  this.selectedEmployeeCountRadioButton = selectedRadioButtonValue;    }

@Component({
   // this is a declarator which starts with @ sign. The component word marked in bold needs to be the same.
   selector: 'app-new-cmp', //
   templateUrl: './new-cmp.component.html', 
   // reference to the html file created in the new component.
   styleUrls: ['./new-cmp.component.css'] // reference to the style file.
})

export class NewCmpComponent implements OnInit {
   constructor() { }
   ngOnInit() {}
}

<p [hidden]="shouldHide">Directives are awesome</p>

import { Directive, ElementRef, Renderer } from '@angular/core';

// Directive decorator
@Directive({ selector: '[myHidden]' })
// Directive class
export class HiddenDirective {
    constructor(el: ElementRef, renderer: Renderer) {
     // Use renderer to render the element with styles
       renderer.setElementStyle(el.nativeElement, 'display', 'none');
    }

@HostListener('mouseover') onHover() {
  window.alert("hover");
}
}

import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core';

@Directive({ selector: '[myNgIf]'})
export class MyNgIfDirective {

  constructor( private templateRef: TemplateRef<any>,
                         private viewContainer: ViewContainerRef) { }

  @Input() set myNgIf(condition: boolean) 
{
    if (condition) {
      this.viewContainer.createEmbeddedView(this.templateRef);
    } else {
      this.viewContainer.clear();
    }
}
}

<div *myNgIf=”person”>{{person.name}}</div>

export class Employee {
    private firstName: string;
    private lastName: string;

    constructor(firstName: string, lastName: string) {
        this.firstName = firstName;
        this.lastName = lastName;
    }
}

export class Employee {
    constructor(private firstName: string, private lastName: string) {
    }
}

import {Injectable, bind} from 'angular2/core';
import {Http} from 'angular2/http';

@Injectable() /* This is #Step 1 */
export class UserService {
  constructor(http: URL /* This is #Step 2 */ ) {
    this.http = URL;
  }
}

<form (ngSubmit)="onSubmit(carForm.value)" #carForm="ngForm">
    <div class="form-group">
        <label class="col-xs-4 control-label" for="greenCarName" >Green car name : </label>
        <div class="col-xs-8">
            <input type="text" style="width: 300px" class="form-control" required
                   [(ngModel)]="myCar.greenCarName" // 2 way binding the input field to the object in Component
                   ngControl="greenCarName"
                   #greenCarName="ngForm" required minlength="10">
            <div [hidden]="greenCarName.valid || greenCarName.pristine" class="alert alert-danger">
                The Name of green car is required !
            </div>
        </div>
    </div>

// Our form component
@Component({
    selector: 'angular-typescript-form',
    templateUrl: 'app/angular-typescript-form.component.html',
    directives: [CORE_DIRECTIVES, FORM_DIRECTIVES]
})
export class FormExample {
    myCar = new GreenCar(1,'BMW Serie 1','Red',2); // this is our green car instance

    //the constructor is a good place for initialization (not big things)
    constructor(){
        console.log("Form Component Start");
    }

    submitted = false; //form not submited : default
    data: string; //this variable contains our data

    //Show data after form submit and set submitted to true
    onSubmit(data) {
        this.submitted = true;
        this.data = JSON.stringify(data, null, 2); // getting data into string variable
        console.log(this.data);
    }
}

<form [ngFormModel]="studentForm" class="form-horizontal" id='myForm' role="form">
  
    <div class="col-md-7">
       Name: <input ngControl="name" #name="ngForm" [(ngModel)]="student.name" type="text" placeholder="Name" class="form-control">
       <span [hidden]="name.valid"><b>Required</b></span>
    </div>
    <div class="col-md-7">
       Password: <input ngControl="password" #password="ngForm" [(ngModel)]="student.password" type="text" id="password" placeholder="password" class="form-control"> // ngControl is a class that binds a Control object to an element. In this case, the element that it's applied to is an input
       <span [hidden]="!password.control.hasError('required')"><b>Required</b></span>
       <span [hidden]="!password.control.hasError('startsWithNumber')"><b>Must start with number</b></span>
    </div>
</form>

import {Component} from 'angular2/core';
import {CORE_DIRECTIVES, NgClass, FORM_DIRECTIVES, Control, ControlGroup, FormBuilder, Validators} from 'angular2/common'; 

class Student {
   name:string;
   password:string;
}

interface ValidationResult {
 [key:string]:boolean;
}
class PasswordValidator {
 static startsWithNumber(control: Control): ValidationResult { 
   if ( control.value && control.value.length > 0){
     if (isNaN(control.value[0]))
      return { 'startsWithNumber': true };
   }
   return null;
 }
}
@Component({
 selector: 'my-app',
 templateUrl: 'mytemplate.html',
 directives: [CORE_DIRECTIVES, FORM_DIRECTIVES] 
})
export class AppComponent { 
  student:Student;
  studentForm: ControlGroup;
  constructor(fb: FormBuilder){
    this.student = new Student();
    this.studentForm = fb.group({
       'name': new Control(this.student.name, Validators.required), // with the help of Control we can define the validation in component only that we used to define in HTML for ngForm
       'password': new Control(this.student.password, Validators.compose([Validators.required,PasswordValidator.startsWithNumber])), // adding cutom validation or more than 1 validation
    });
  }

ngOnChanges(changes: SimpleChanges) 
{ 
for (let propName in changes) 
{ 
let chng = changes[propName]; 
let cur = JSON.stringify(chng.currentValue); 
let prev = JSON.stringify(chng.previousValue); 
console.log(`${propName}: currentValue = ${cur}, previousValue = ${prev}`); 
} 
}

import { DoCheck, KeyValueDiffers } from '@angular/core';

@Component({...})
class ChildComponent implements DoCheck {
 @Input() person: any;
 differ: any;

 constructor(private differs: KeyValueDiffers) {
  this.differ = differs.find({}).create(null); //this will return the IterableDifferFactory object for all objects available in this child component
 }
 
 ngDoCheck() {
  var changes = this.differ.diff(this.person);

  if(changes) {
   console.log('changes detected');
   changes.forEachChangedItem(r => console.log('changed ', r.currentValue));
   changes.forEachAddedItem(r => console.log('added ' + r.currentValue));
   changes.forEachRemovedItem(r => console.log('removed ' + r.currentValue));
  } else {
   console.log('nothing changed');
  }
 }
}