Building a Start Page Using Angular

Recently, I stumbled upon a sub-Reddit called /r/startpages. The concept of having a “start page” isn’t new, but for some reason it struck me as something that I’d like to do and I don’t know why I haven’t done it before. Currently, when I open my browser, I have it auto-open a bunch of tabs which can take a few seconds for everything to load. I’m thinking that having a start page will keep the initial load clean while keeping load times down. That’s what I’d like to work on this article.

Requirements

• NodeJS – I’d recommend using NVM to manage your NodeJS installations
• Angular CLI
• Web Server – Something like nginx or Apache

Getting Started

I’d like to make this strictly a client-side application for now. Eventually, there may be some server-side components to it, but I can’t think of anything that requires it just yet.

We’ll get started by creating a brand new Angular project. Type the following into a command window:

ng new start-page

We’ll skip routing and use CSS for the stylesheets.

Go ahead and start the server:

ng serve

Adding Data

We’ll start by adding some data to our application. I’d like to keep things simple to start with, so we’ll just have groups of bookmarks. Each group will contain a label for that group and a list of links. Each link will have a url and a label.

Open up app.component.ts and add the following block of code just after the “title”:

public bookmarkGroups: any = [
  {
    label: 'Coding',
    links: [
      {url: 'https://codeacademy.com', label: 'Code Academy'},
      {url: 'https://code.org', label: 'Code.org'}
    ]
  },
  {
    label: 'Blogs',
    links: [
      {url: 'https://synaptiklabs.com', label: 'Synaptik Labs'},
      {url: 'https://wilwheaton.net', label: 'Wil Wheaton'}
    ]
  }
];

You can, of course, change these to contain whatever you want.

First Component

Open up app.component.html and change it to look like this:

<div class="bookmarks-container">
  <app-bookmarks *ngFor="let bookmarks of bookmarkGroups" [bookmarks]="bookmarks"></app-bookmarks>
</div>

All we’re doing here is rendering a component that we’ll create and passing in each group of bookmarks.

Now let’s create our bookmarks component. You can do that by running:

ng generate component bookmarks

This command will create our new BookmarksComponent and all of its associated files (template, styles, and tests) in its own folder. It also registers the component with your application as well. You could do this manually, but this is a nice quick way to get everything you need where it needs to be.

Now open up the bookmarks/bookmarks.component.ts file and change the class to look like:

export class BookmarksComponent implements OnInit {
  @Input()
  public bookmarks: any;

  constructor() { }

  ngOnInit() {
  }
}

All this does is tell the component that it expects to receive data via the “bookmarks” attribute, which we did in app.component.html.

Next open up the bookmarks/bookmarks.component.html file and change it to the following:

<span class="bookmarks-container">
	<h2>{{bookmarks.label}}</h2>
	<ul>
		<li *ngFor="let link of bookmarks.links"><a target="_blank" href="{{link.url}}">{{link.label}}</a></li>
	</ul>
</span>

Keep in mind, the templates have direct access to the component’s data. The references to “bookmarks” you see here correspond to the “bookmarks” variable in the BookmarksComponent.

So, all we’re doing here is wrapping everything in a container, rendering a nice big header for the entire group then listing each bookmark as a link.

We should now be able to open http://localhost:4200 and see something.

It doesn’t look very pretty. Let’s fix that!

We’ll start by opening up styles.css and add the following to it:

body {
  margin: 0px;
  padding: 0px;
  background: #111;
  font-family: "Hack";
  color: #888;
}

This will remove the default padding a webpage normally receives, and changes the colors to a darker palette. We’re also changing the default font to the “Hack” font which we’ll add now. Open up index.html
and add the following line after the last “link” tag:

<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/hack-font@3/build/web/hack.css'>

Next, open app.component.css and add the following to it:

.bookmarks-container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: center;
}

app-bookmarks {
  width: 15%;
  padding: 8px;
}

All this is doing is adding some nice spacing, changing the rendering orientation, and ensuring all of the bookmark groups will wrap to the next line.

Now open up bookmarks.component.css and add the following:

ul {
  list-style: none;
  padding-left: 0px;
}

a,
a:visited {
  color: #AAA;
  padding-left: 0px;
  transition: padding-left 50ms ease-in-out;
}

a:hover {
  color: #888;
  padding-left: 4px;
  transition: padding-left 50ms ease-in-out;
}

These styles will remove the bullets from the unordered list we have, apply some colors, and even add an animation effect when we hover over each link.

You should now have something that looks like this:

Deploying

Now that we have something to look at, we should build a distribution of our web app so we can host it on a web server. At a command prompt, type the following:

ng build

This will build up a bundle in the dist/ folder. You can copy all of that out to a folder that is served up by a web server so it doesn’t rely on ng serve.

Closing

Not too bad for a quick start page. Of course, there are some things that could be improved. For instance, it would be nice to have the labels for each bookmark group have a different color. It could also be nice to display the favicons for each link as well. Try doing those as an exercise. If you get stuck, you can look at the git repo.

That’s it for this article. Let me know if you have any issues or suggestions for improvement.

Source code is available here: