Show List

Tutorials > Angular > Angular Coding Questions

Angular Coding Questions

Create an Angular component with an input property and a button. When the button is clicked, the component should emit an event that passes the value of the input property.

Answer:

kotlin

Copy code

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

@Component({
  selector: 'app-example',
  template: `
    <input [(ngModel)]="inputValue">
    <button (click)="emitInputValue()">Click Me</button>
  `
})
export class ExampleComponent {
  @Input() inputValue: string;
  @Output() inputValueEmitter = new EventEmitter<string>();

  emitInputValue(): void {
    this.inputValueEmitter.emit(this.inputValue);
  }
}

Create a pipe that takes in a string and converts it to uppercase.

Answer:

typescript

Copy code

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({name: 'uppercase'})
export class UppercasePipe implements PipeTransform {
  transform(value: string): string {
    return value.toUpperCase();
  }
}

Create an Angular service that gets data from an API endpoint and returns it as an observable.

Answer:

typescript

Copy code

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable()
export class DataService {
  constructor(private http: HttpClient) {}

  getData(): Observable<any> {
    return this.http.get('https://example.com/api/data');
  }
}

Create an Angular directive that changes the background color of an element when it is clicked.

Answer:

typescript

Copy code

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

@Directive({
  selector: '[appBackgroundColor]'
})
export class BackgroundColorDirective {
  constructor(private el: ElementRef) {}

  @HostListener('click') onClick() {
    this.el.nativeElement.style.backgroundColor = 'red';
  }
}

Create an Angular component that displays a list of items, with the ability to add and remove items from the list.

Answer:

kotlin

Copy code

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

@Component({
  selector: 'app-list',
  template: `
    <ul>
      <li *ngFor="let item of items">{{item}} <button (click)="removeItem(item)">X</button></li>
    </ul>
    <input [(ngModel)]="newItem">
    <button (click)="addItem()">Add Item</button>
  `
})
export class ListComponent {
  items: string[] = ['item1', 'item2', 'item3'];
  newItem: string;

  addItem(): void {
    if (this.newItem) {
      this.items.push(this.newItem);
      this.newItem = '';
    }
  }

  removeItem(item: string): void {
    this.items = this.items.filter(i => i !== item);
  }
}

Create an Angular component that displays a modal dialog when a button is clicked.

Answer:

kotlin

Copy code

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

@Component({
  selector: 'app-modal',
  template: `
    <div class="modal" [ngStyle]="{display: show ? 'block' : 'none'}">
      <div class="modal-content">
        <ng-content></ng-content>
        <button (click)="hideModal()">Close</button>
      </div>
    </div>
    <button (click)="showModal()">Open Modal</button>
  `
})
export class ModalComponent {
  show = false;

  showModal(): void {
    this.show = true;
  }

  hideModal(): void {
    this.show = false;
  }
}

Create an Angular component that fetches data from an API endpoint and displays it in a table.

Answer:

php

Copy code

import { Component, OnInit } from '@angular/core';
import { DataService } from './data.service';

@Component({
  selector: 'app-table',
  template: `
    <table>
      <thead>
        <tr>
          <th>Id</th>
          <th>Name</th>
          <th>Email</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let item of data">
          <td>{{item.id}}</td>
          <td>{{item.name}}</td>
          <td>{{item.email}}</td>
        </tr>
      </tbody>
    </table>
  `
})
export class TableComponent implements OnInit {
  data: any[];

  constructor(private dataService: DataService) {}

  ngOnInit(): void {
    this.dataService.getData().subscribe(data => {
      this.data = data;
    });
  }
}

Create an Angular pipe that takes in an array and returns a new array with only the unique values.

Answer:

typescript

Copy code

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({name: 'unique'})
export class UniquePipe implements PipeTransform {
  transform(value: any[]): any[] {
    return [...new Set(value)];
  }
}

Create an Angular service that saves data to local storage.

Answer:

typescript

Copy code

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

@Injectable()
export class StorageService {
  saveData(key: string, value: any): void {
    localStorage.setItem(key, JSON.stringify(value));
  }

  getData(key: string): any {
    const value = localStorage.getItem(key);
    return value ? JSON.parse(value) : null;
  }

  removeData(key: string): void {
    localStorage.removeItem(key);
  }
}

Create an Angular directive that adds a tooltip to an element when the mouse hovers over it.

Answer:

kotlin

Copy code

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

@Directive({
  selector: '[appTooltip]'
})
export class TooltipDirective {
  private tooltip: HTMLElement;

  constructor(private el: ElementRef, private renderer: Renderer2) {}

  @HostListener('mouseenter') onMouseEnter() {
    this.showTooltip();
  }

  @HostListener('mouseleave') onMouseLeave() {
    this.hideTooltip();
  }

  private showTooltip(): void {
    this.tooltip = this.renderer.createElement('div');
    this.renderer.addClass(this.tooltip, 'tooltip');
    const text = this.renderer.createText('Tooltip Text');
    this.renderer.appendChild(this.tooltip, text);
    this.renderer.appendChild(this.el.nativeElement, this.tooltip);
  }

  private hideTooltip(): void {
    this.renderer.removeChild(this.el.nativeElement, this.tooltip);
  }
}

Create a component that displays a list of items from an array. Answer:

html

Copy code

<!-- item.component.html -->
<ul>
  <li *ngFor="let item of items">{{ item }}</li>
</ul>

typescript

Copy code

// item.component.ts
import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-item',
  templateUrl: './item.component.html',
})
export class ItemComponent {
  @Input() items: string[];
}

Example usage:

html

Copy code

<app-item [items]="['Item 1', 'Item 2', 'Item 3']"></app-item>

Create a component that allows users to add items to a list. Answer:

html

Copy code

<!-- add-item.component.html -->
<input [(ngModel)]="newItem" placeholder="Enter a new item...">
<button (click)="addItem()">Add Item</button>

typescript

Copy code

// add-item.component.ts
import { Component, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-add-item',
  templateUrl: './add-item.component.html',
})
export class AddItemComponent {
  newItem: string = '';

  @Output() itemAdded = new EventEmitter<string>();

  addItem() {
    this.itemAdded.emit(this.newItem);
    this.newItem = '';
  }
}

Example usage:

html

Copy code

<app-add-item (itemAdded)="items.push($event)"></app-add-item>
<app-item [items]="items"></app-item>

Create a directive that highlights text in yellow. Answer:

typescript

Copy code

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

@Directive({
  selector: '[appHighlight]',
})
export class HighlightDirective {
  constructor(private el: ElementRef) {}

  @HostListener('mouseenter') onMouseEnter() {
    this.highlight('yellow');
  }

  @HostListener('mouseleave') onMouseLeave() {
    this.highlight(null);
  }

  private highlight(color: string) {
    this.el.nativeElement.style.backgroundColor = color;
  }
}

Example usage:

html

Copy code

<p appHighlight>Hover over this text to highlight it.</p>

Create a service that retrieves data from an API. Answer:

typescript

Copy code

// data.service.ts
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root',
})
export class DataService {
  constructor(private http: HttpClient) {}

  getData(): Observable<any> {
    return this.http.get('https://api.example.com/data');
  }
}

Example usage:

typescript

Copy code

// app.component.ts
import { Component, OnInit } from '@angular/core';
import { DataService } from './data.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})
export class AppComponent implements OnInit {
  data: any;

  constructor(private dataService: DataService) {}

  ngOnInit() {
    this.dataService.getData().subscribe((data) => {
      this.data = data;
    });
  }
}

Leave a Comment

Introduction to Angular

Environment Set Up

First Angular Application and Elements Overview

Angular Component

Angular Directives

Event Binding

Data Binding

Property Binding

Angular Service

Angular Pipe

Angular Module

Angular Routing

Angular Forms

Angular HttpClient

Quiz - Angular - 1

Quiz - Angular - 2

Quiz - Angular - 3

Quiz - Angular - 4

Angular Interview Questions A

Angular Interview Questions

Angular Coding Questions

Angular Coding Questions