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
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/
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.
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
Using service to get a random quote from a component
Calling child component’s function from the parent component
Live address: http://5b3705ca02ed8359970e2262.silly-perlman-68e0f4.netlify.com/