Scribd
Upload
9 views7 pages

Angular App Laptop Services

Uploaded by

Gulab khan
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
9 views7 pages

Angular App Laptop Services

Uploaded by

Gulab khan
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 7

Create Angular app to implement Laptop service (array of object) and perform CRUD operation on it.

using services

Laptop Service (laptop.service.ts)

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

@Injectable({

providedIn: 'root'

})

export class LaptopService {

laptops = [

{ id: 1, name: 'Laptop 1', price: 500 },

{ id: 2, name: 'Laptop 2', price: 600 },

{ id: 3, name: 'Laptop 3', price: 700 }

];

constructor() { }

getLaptops() {

return this.laptops;

getLaptop(id: number) {

return this.laptops.find(laptop => (link unavailable) === id);


}

addLaptop(laptop) {

this.laptops.push(laptop);

updateLaptop(laptop) {

const index = this.laptops.findIndex(l => (link unavailable) === (link unavailable));

if (index > -1) {

this.laptops[index] = laptop;

deleteLaptop(id: number) {

const index = this.laptops.findIndex(laptop => (link unavailable) === id);

if (index > -1) {

this.laptops.splice(index, 1);

Laptop Component (laptop.component.ts)

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

import { LaptopService } from '../laptop.service';

@Component({
selector: 'app-laptop',

template: `

<ul>

<li *ngFor="let laptop of laptops">

{{ laptop.name }} ({{ laptop.price }})

</li>

</ul>

<button (click)="addLaptop()">Add Laptop</button>

`,

})

export class LaptopComponent implements OnInit {

laptops = [];

constructor(private laptopService: LaptopService) { }

ngOnInit() {

this.laptops = this.laptopService.getLaptops();

addLaptop() {

const newLaptop = { id: 4, name: 'Laptop 4', price: 800 };

this.laptopService.addLaptop(newLaptop);

this.laptops = this.laptopService.getLaptops();

Add Laptop Component (add-laptop.component.ts)


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

import { LaptopService } from '../laptop.service';

@Component({

selector: 'app-add-laptop',

template: `

<form (ngSubmit)="addLaptop()">

<label>Name:</label>

<input type="text" [(ngModel)]="newLaptop.name">

<br>

<label>Price:</label>

<input type="number" [(ngModel)]="newLaptop.price">

<br>

<button type="submit">Add Laptop</button>

</form>

`,

})

export class AddLaptopComponent implements OnInit {

newLaptop = { id: 0, name: '', price: 0 };

constructor(private laptopService: LaptopService) { }

ngOnInit() {

addLaptop() {

this.laptopService.addLaptop(this.newLaptop);

}
}

Edit Laptop Component (edit-laptop.component.ts)

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

import { LaptopService } from '../laptop.service';

@Component({

selector: 'app-edit-laptop',

template: `

<form (ngSubmit)="updateLaptop()">

<label>Name:</label>

<input type="text" [(ngModel)]="laptop.name">

<br>

<label>Price:</label>

<input type="number" [(ngModel)]="laptop.price">

<br>

<button type="submit">Update Laptop</button>

</form>

`,

})

export class EditLaptopComponent implements OnInit {

laptop = { id: 0, name: '', price: 0 };

constructor(private laptopService: LaptopService) { }

ngOnInit() {
}

updateLaptop() {

this.laptopService.updateLaptop(this.laptop);

Delete Laptop Component (delete-laptop.component.ts)

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

import { LaptopService } from '../laptop.service';

@Component({

selector: 'app-delete-laptop',

template: `

<button (click)="deleteLaptop()">Delete Laptop</button>

`,

})

export class DeleteLaptopComponent implements OnInit {

laptopId = 1;

constructor(private laptopService: LaptopService) { }

ngOnInit() {

deleteLaptop() {
this.laptopService.deleteLaptop(this.laptopid);

You might also like