Scribd
Upload
23 views

Activity 3

The document discusses Angular concepts like input, output properties, NgModel and a MusicService that provides methods to get artists, albums, albums by artist and other CRUD methods for albums.

Uploaded by

dannyabeuov
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
23 views

Activity 3

The document discusses Angular concepts like input, output properties, NgModel and a MusicService that provides methods to get artists, albums, albums by artist and other CRUD methods for albums.

Uploaded by

dannyabeuov
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 10

Daniyar Abeuov

CST-391

February 25, 2023

Activity 3

Name submitted
Name left blank

Small window
Medium window

Fullscreen
Buy button with developer console.

Research:

@Input decorator marks a class field as an input property. This property is bound to a DOM property in
the template. When the change occurs, angular will update the data property with DOM’s property
value. In our case we mark name as an input, if that value is changed Angular will update our name
property accordingly.

[value] or in our case [name] is used in shop.component.html to pass the name value to info
component.

[(NgModel)] creates a form model instance and binds form control elements to the model.

Part 2:
Main page

Gcu home page


Create album page

Artist list
Album list

Research:

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


import exampledata from '../../data/sample-music-data.json';
import { Artist } from './../models/artists.model';
import { Album } from '../models/albums.model';

//Decorator that marks a class as available to be provided and injected as a


dependency.
@Injectable({ providedIn: 'root' })
export class MusicServiceService {

//album array
albums: Album[] = exampledata;

/*
method to get all artists
returns Artist[]
*/
public getArtists(): Artist[] {
let artists: Artist[] = [];
let artistSet = new Set<string>();

this.albums.forEach(a => artistSet.add(a.artist));


artistSet.forEach(a => artists.push({artist: a}))
return artists;
}

/*
method to get all albums
returns Album[]
*/
public getAlbums(): Album[] {
// Return the list of Albums
return this.albums;
}

/*
method to get all albums from the artist
parameters: Artist
returns Album[]
*/
public getAlbumsOfArtist(artist: Artist): Album[]{
//iterates through all albums, checks forartist name match and adds that
album to the array
for (let i = 0; i < this.albums.length; ++i) {
if (this.albums[i].artist === artist.artist) {
return this.albums;
}
}
return this.albums;
}

/*
method to get album by album id
parameters: number
returns Album | null
*/
public getAlbum(id: number): Album | null {
// Search for the Album in list of Albums and return the Album when found
for (let i = 0; i < this.albums.length; ++i) {
if (this.albums[i].albumId == id) {
return this.albums.splice(i, 1)[0];
}
}
return null;

}
/*
method to add a new Album
parameters: Album
returns number
*/
public createAlbum(album: Album): number {
// Add a new Album to the list of Albums
this.albums.push(album);
return 1;
}

/*
method to update Album
parameters: Album
returns number
*/
public updateAlbum(album: Album): number {
// Search for the Album in the list of Albums and replace it in the list
for (let i = 0; i < this.albums.length; ++i) {
if (this.albums[i].albumId == album.albumId) {
this.albums.splice(i, 1, album);
return 0;
}
}
return -1;
}

/*
method to delete Album
parameters: number
returns number
*/
public deleteAlbum(id: number): number {
// Search for the Album in the list of Albums and delete from the list
for (let i = 0; i < this.albums.length; ++i) {
if (this.albums[i].albumId == id) {
this.albums.splice(i, 1);
return 0;
}
}
return -1;
}
}

You might also like