Build a Music Player with Angular & Electron II : Making the UI

In the previous post on building a music player with Angular and Electron, we were able to successfully setup an environment where our app can live. Angular was bootstrapped, Electron was loaded, and the app opens up displaying a test content.

We also discussed the different types of components which are presentation and container components. In this part of the series, we will build our presentation components which include the following:

Search

Details

Player

Progress

Footer

Table of Contents

Based on the Angular Style Guide, we will structure our app in a manner that every presentation component is going to be in a folder. This folder will also contain the component's HTML and CSS files. Starting from the app directory, our app structure should look like the following:

Do not panic at the errors because we are yet to create these members and we will start doing that right away.

1. Search Component

The search component is an autocomplete control so rather than walk the painful stress of building it, we can just make use of what PrimeNG. PrimeNG's autocomplete is a drop and use component and very easy to setup.

First, we have to install primeng:

Free Node eBook

Build your first Node apps and learn server-side JavaScript.

📧

Nice!

Check your email to confirm your subscription.

# Install PrimeNGnpminstall primeng --save

When npm is done with the installation, import primeng to the MusicModule. We already did that:

The autocomplete uses [ngModel] property to keep track of the value of the text box. [suggestions] is the list it should search in which is tracks. completeMethod is the event raised on keystrokes while onSelect is the event raised when the autocomplete suggestions item is clicked.

The values of these events and properties are passed down from the container component, and we will see how that is done when we discuss the container component.

See how this component completely unaware of how the tracks created or even how the search and select events are handled. All it knows is that someday, it's parent will send down tracks to it using Input decorator and when an event is raised within, it is delegated to the parent component with Output to handle.

We are beginning to see how UI/presentation components are dumb and unaware of a lot of things about our application.

3. Player Component

The player component has the most controls with the most events. The controls that control sound -- play, pause, stop, forward, backward and random. The component also receives a boolean Input property to check if a song is playing or not so as to.

The snippet above shows how the events on the component class are emitted when each of the buttons is clicked. The paused property is used to toggle between the pause and the play buttons when the song is playing and paused respectively.

4. Progress Component

The progress component is responsible for displaying how far into a song we have played as well as the played time and the total time it takes the play the song. This one has no events to emit but just 3 Input properties to keep track of time.

Jobs!

If you’re familiar with popular JavaScript frontend frameworks like React, Angular, etc, then the concept of ECMAScript won’t be entirely new to you. ES Modules have the import and export syntax we see often in frontend frameworks. Node uses CommonJS which re...