Next lesson playing in 5 seconds

  • Overview
  • Transcript

4.6 Set Up the Menu

Hello everyone, I am Reggie Dawson. Welcome to the Semantic UI Framework and JavaScript project scores with Tuts+. Now that we have our Angular 2 project setup, we can get started building our menu bar. Another thing that's nice about the command line interface is the ability to use it to generate a component. When we build components with Angular 2, we typically have to add three files. We have the component itself, the template and the style sheet file for each component. Now we don't have to add a style sheet and we can add the template in line but I prefer the template in its own file. First navigate to your project in a command line. Then navigate into the SRC folder. And then navigate into the app folder. Here is where we are going to generate our menu component. ng g which is short for generate, is going to generate a component named myMenu. After this command runs files will be generated for this component. The great thing about this is that our file is imported for us into our app module automatically. After that, let's go to the my menu.component.ts file inside of the my menu folder inside of our app folder. After that, let's go to the my menu.component.ts file inside of the my menu folder inside of our app folder. Now the first thing we can do is we can remove OnInit from our import. This method is used when a component is created to grab data from a remote source, for example. We won't need it for anything in this component, so we can remove it. Then the selectors, how we reference the component in our template. We're going to build our project the same we did with react, by importing components into the app component. The templateUrl is the template where we will set up our semantic components. We could have also added the template inline, like we did with React. But I find this method to be a bit cleaner even if it does require the creation of an additional file. The styleUrls points to the component level CSS file that was also generated by the Angular command line interface. Then we need to remove the implements OnInit keyword from our class. As well as removing the ngOnInIt method from inside of our class. We could leave the constructor as is but we also do not need this as well. Then we can go over to my-menu.component.html file, we can remove everything from here and start with a div for our menu. You should be familiar with the syntax enough now to know how we are configuring this menu bar. The menu bar will not have any borders and will extend the width of the viewport. Then we have an item with the icon that has the text Explore. Then we add two more items. Then I add an icon for the logo. I have set this icon to be large, circular and green. Then we add another link set to the right. Now I do this to kind of trick the menu bar into setting the icon in the center. After that we add two more links. Once we do that let's go to the app.component.ts file. All we have to do in this file is remove the variable since we don't need it anymore. Then let's go over to the app.component.html file. Remove everything from the file and replace it with our selector. We will just place our selector in a row, and we will build the following sections within their own grid. Go ahead and save your project. Make sure you are in the root of your project and run npm start. Now once the project compiles, navigate to local host 4200 in your browser. In the next video, we will set up the hero area of our project.

Back to the top