Examples of components you can create include smaller UI elements such as buttons or cards. They can also include larger UI elements such as sidebars, navigation bars, or whole pages.
Using Components in Angular
When you create components in an Angular application, you can use them within other components. For example, you could create a component for a large UI card element. You can then use this component as a regular HTML tag, anywhere you like:
Since components are reusable bits of code, you can also pass variables so that the data for each instance is different. You can also create components for pages, and you can route to them accordingly using the app-routing.module.ts file.
You can design your components based on the structure of your application, and how much you want to separate your functionality.
How to Create a Component
You can use the ng generate command to create a new component.
Create a new Angular application using ng new or open an existing one. Open the command prompt or terminal. Alternatively, if you have your Angular application open in an IDE such as Visual Studio Code, you can use the built-in terminal. In the terminal, navigate to the location of the root folder of the project. For example: cd C:\Users\Sharl\Desktop\Angular-Application Run the ng generate component command, followed by the name of the new component: ng generate component ui-card The new component will get created in a new folder, inside the src/app directory.
How to Add Content to the Angular Component
Angular creates each component with an HTML, CSS, TypeScript, and Testing Specification file.
The HTML file stores the HTML content of the component. The CSS file stores the styling of the component. The Testing Specification (spec. ts) file stores any unit tests for the component. The TypeScript file stores the logic and functionality that defines the component.
Add some content to the custom ui-card component.
Open src/app/ui-card/ui-card. component. html, and update the component’s HTML. Make sure you have an image using the same name in a folder named src/assets/images in your Angular application. Replace the content of ui-card. component. html with the following:
Blue Mountains
NSW, Australia
How to Use the Component in the HTML of Another Component
Inside ui-card.component.ts, there are three attributes: selector, templateUrl, and styleUrl. The templateUrl refers to the HTML of the component (and therefore links to the HTML file). The styleUrls attribute refers to the CSS of the component and links to the CSS file.
When you use the UI Card component in another component, you will use the “app-ui-card” selector name.
First, add some content to your webpage. Open src/app/app. component. html and add a navbar:
Add some styling to your navbar in src/app/app. component. css: . navbar-header { background-color: #07393C; padding: 30px 50px; display: flex; align-items: center; font-family: sans-serif;} . nav-title { text-decoration: none; color: white; font-size: 16pt;} Underneath the navbar in app. component. html, add a new UI card. Use the “app-ui-card” selector name as an HTML tag:How to Pass Input Parameters Into the Component
Since the component is re-usable, there are attributes that you may want to change every time you use it. In this case, you can use input parameters.
Add Input to the list of imports at the top of ui-card. component. ts: import { Component, Input, OnInit } from ‘@angular/core’; Then add two input variables inside the UICardComponent class. These will let you change the location name and image that displays on the card. Populate the ngOnInit function as shown, to build the path to the image or use a default value: export class UiCardComponent implements OnInit { @Input() locationName: string; @Input() imageName: string; constructor() { } ngOnInit(): void { if (this. imageName) { this. imageName = “. /assets/images/” + this. imageName; } else { this. imageName = “. /assets/images/blue-mountains. jpg”; } }} In ui-card. component. html, change the hard coded Heading 4 “Blue Mountains” value to use the “locationName” input variable instead. Also change the hard coded src attribute in the image tag to use the “imageName” input variable:
{{locationName ? locationName : ‘Blue Mountains’}}
NSW, Australia
How to Route to a New Component
If your component is representing a large part of your website such as a new page, then you can also route to that component.
Open app-routing. module. ts. Import the UI Card Component at the top of the file: import { UiCardComponent } from ‘. /ui-card/ui-card. component’; Add a routing path to the routes array: const routes: Routes = [ // . . . Any other routes you may need . . . { path: ‘uicard’, component: UiCardComponent },] Replace all the current content in app. component. html to only include the navbar and a router-outlet HTML tag. The router-outlet allows you to route between pages. Add a hyperlink to the navbar, with the href attribute matching the path in the routes array:
Creating Components in Angular
A component is one of the major building blocks of Angular. Components allow you to break up different sections of your website into smaller, reusable parts. You can make anything into components, including smaller buttons, cards, larger sidebars, and navigation bars.
You can also use input variables to pass data across different instances of the component. And you can route to the component using URL paths.
If you’re developing a new Angular app, you may need to build a navigation bar for your users to navigate through your components. Having a responsive nav bar allows you to view it on different devices, across different screen sizes.
