Angular 2 – Material design on your desktop apps.

Hi Friends,

Hope you are all well. This post is a response to my friends asking me for more angular 2 + electron posts. In this post we are going to write some code that enables us to use material design on our electron apps.

Let’s begin.

A screencast of this post

 

The complete code for this post is available here.

First let’s grab a copy of angular2-desktop app from here.

Note that I have updated the application with newer RC version of angular and the router and also electron.

Just run the below command after cloning the repo

We will be making use of the angular2-materialize library to use the materializecss framework in our application.

So, let’s get that library installed using the below commands.

This will install materialize-css and angular2-materialize in your app. Then we need jquery and hammerjs since materializecss framework is dependent on those.

So let’s install those using the below commands.

Now open the webpack.config.js and file and modify it as shown below.

Changes done:

1) We add a couple of aliases pointing to the actual stylesheet and the js file we are getting when we install materialzecss framework.

2) We then add a few loaders that tell our webpack configuration to use css-loader, style-loader for processing our materiaze css stylesheet and another url-loader for the fonts and icons which we will be using.

3) Next we add a plugin for jquery.

To install the afore-mentioned loaders use the below command.

Now open up index.html and add the below line of code to the head section.

This is for using the material design fonts and icons in our app.

Let’s reorganize our files in the app. Create a new file called app.component.ts and another file as app.component.html

Open up main.ts and modify it as below.

Open up app.component.ts and add the below code.

Okay, now that we have installed our angular2-materialize library, let’s make use of it and actually do some designing.

What we’ll be building.

A simple app that gets a subreddit name as input and then shows us the posts under that subreddit.

How we’ll be building this

We will be making a get request to the reddit url and get the json response which will then be condensed into a readable format.

Open up app.component.ts and add the below code.

Let’s break this down.

  1. First we add imports for our angular2-materialize. Then we add it to our list of directives.
  2. We simply make a http call to the reddit url and we pass in the user entered value along with it.
  3. We map the response successively condensing it to just four required fields that we are going to populate on the front-end.
  4. Certain results might not have an image. So in that case we are just using a placeholder.
  5. The openlinks method is just used to open the links attached to each of the entry in a external browser window. We make use of the shell from the electron-renderer process to do that.

Now open app.component.html and add the below code.

Let’s break this down.

  1. We add materialize to <div> to specify that the code in the div is styled with the materializecss framework. (without this it won’t work).
  2. We have a simple text field into which the user will enter the name of the subreddit.
  3. Then there is a cards segment. NgFor is used to iterate the cards here thereby indicating a new card is created for each post in that subreddit.
  4. In the card we add an image to the left side and specify our image url in the image src.
  5. We then add the title in the card content and below the content we have a read more link which upon clicking would open the link in our browser.
  6. If you notice, we are also using a ngif in order to hide this entire cards segment. Only upon the success of the http call, we are showing this.

Once you have done all this. simply build and run your application using the below commands.

You would get a screen like the one shown below.

material

Enter any subreddit name and click on GO

The posts pertaining to it will be displayed as shown below.

material2

If you click on Read More link then it will open the link in an external browser window.

So, this is how you could use material design in your angular2/electron desktop apps guys. I have just touched upon the basics and you could literally design your screen as per your imagination.

Hope this helped you guys. If it helped you, kindly share it with someone else and help them too.

Thanks for reading. Peace.. :)

 

  • Nishanth

    Hi , Just want to Know is it Possible to Use ELECTRON with Anuglarfire2 or Firebase ?

  • Arick Conley

    I can’t get this to work for me. I clone the repo, follow all the steps, build it, run it, and still don’t get any of the material styles to work. If I clone the finished repo and run it, it’s fine. If I “npm install”, then build, it breaks just like the repo I edited. Am I missing global npm packages you have or something? I’ve tried different webpack configs, changed the order of loading, nothing works…

    • I am not sure, I follow you bro; What do you mean by clone the finished repo and run it and what do you mean when you say I clone the repo, follow all the steps, build it, run it..? Could you please elaborate your issue so that I could help if possible..?

      • Arick Conley

        Absolutely.

        At the beginning of the article you have a github repo for the finished product. If I clone that repo and run it, everything works just fine. If I “npm install” to install all the packages required, then run an “npm run build”, then run it again, it breaks and is no longer displaying the material styling.

        If I use your other github repo, clone it, and follow all the instructions in this article, I can’t get it to work. The material styling never works. Even if I’m copy/pasting all the code examples exactly like this article, it doesn’t work. There are no errors in the Javascript console. I also have access to the Materialize object in the javascript console, so it seems as though my stylesheets aren’t being packaged with webpack or something.

        Any help would be appreciated.

        • Izbicki Kuba

          I have found out, if you clone this repo and just hit npm start, it will work perfectly fine, but if you try to npm run build, then the application doesnt work as intended, what i mean is that the components seem to loose the colors and the formatting is wrong, i have attached an image so you can see for yourself. Any idea why it is like that?

          • Izbicki Kuba

            ok i think i have figured it out, i have read the project page of angular2-materialize
            https://www.npmjs.com/package/angular2-materialize
            and it appears your project is missing one import in index.html:

            now when i have imported it all seems to be working just fine :)
            and btw thank you for your angular/electron tutorials ! 😀

  • venki

    Hi Raja

    Great stuff mate. can make quick toturial with routing pls i am stucked with couple of days pls

    once again great stuff mate u are my life saver

    thanks
    venki suragani