Month: July 2018

Angular dharma page #5

DharmaPage

This is the number 5 of my 100 angular projects. This project is based on the previous one Angular dhamma player #4.

This project has two components; the main page and audio track player page. On the home page, four images of famous Burmese Monks are shown in card style. When the user clicked on a card, they are brought to a player with the dhamma talks of the selected monk.

Basically, I am trying to learn how to use the Angular router for navigation between different components in a single page application.

Everything went well, except for one thing. I have been spending way too much time messing around with CSS and colors instead of focusing on functionality.

So, from now on I will spend less time on design aspect and more on functional aspects for future projects.

Live project link: https://inspiring-benz-2fb43a.netlify.com

Github: https://github.com/zkkmin/dharma-page

 

Angular dhamma player #4

Screen Shot 2018-07-03 at 10.00.36 AM

This is the #4 in my attempt at building 100 projects with Angular.

In this project, I decided to build a simple audio player with a playlist attached. I learned the following concepts while implementing it.

  • *ngFor to display list
  • master/display components
  • event handling with (onclick)

HTML5 audio element is used for playing the mp3 files in the list. This audio player component is a very simple component and I intend to use it in the bigger project later.

Check out both live project and source code for more details.

Live address: https://condescending-einstein-c291a3.netlify.com/

Github: https://github.com/zkkmin/dhamma-player

Angular random quote #3

This is the third project of my ongoing challenge, 100 angular projects.

In this project, I created a web page which fetches a random quote from an API endpoint and displays it on the page.

Screen Shot Muse

I have learned a few new concepts while creating this simple web application, such as

  • using services to separate fetching data from components
  • using observable and Angular HttpClient for fetching data asynchronously and providing a way for the data to be consumed from a component
  • calling child component’s function from parent component using @ViewChild

Service, Observable and HttpClient for asynchronous API call


import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { HttpClient } from '@angular/common/http';
@Injectable({
providedIn: 'root'
})
export class QuoteService {
private quoteUrl = "https://talaikis.com/api/quotes/random/";
getQuote(): Observable <{}> {
return this.http.get(this.quoteUrl)
};
constructor(
private http: HttpClient
) { }
}

view raw

quote.service.ts

hosted with ❤ by GitHub

Using service to get a random quote from a component


import { Component, OnInit } from '@angular/core';
import { QuoteService } from '../quote.service';
@Component({
selector: 'app-random-quote',
templateUrl: './random-quote.component.html',
styleUrls: ['./random-quote.component.css']
})
export class RandomQuoteComponent implements OnInit {
constructor(private quoteService: QuoteService) { }
getQuote(): void {
this.quoteService.getQuote()
.subscribe(quote => {
this.quote = '"' + quote['quote'] + '"';
this.author = '~' + quote['author']
});
}
quote: string;
author: string;
ngOnInit() {
this.getQuote();
}
}

view raw

random-quote.component.ts

hosted with ❤ by GitHub

Calling child component’s function from the parent component


import { Component, ViewChild } from '@angular/core';
import { RandomQuoteComponent } from './random-quote/random-quote.component'
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
@ViewChild(RandomQuoteComponent)
private randomQuoteComponent: RandomQuoteComponent;
title = 'Muse';
onClickMe() {
this.randomQuoteComponent.getQuote();
}
}

view raw

app.component.ts

hosted with ❤ by GitHub

Live address: http://5b3705ca02ed8359970e2262.silly-perlman-68e0f4.netlify.com/

Git: https://github.com/zkkmin/muse