Angular UL List Example

This example will tell you how to use custom angular js component to display an array of string data in html ul list. It will use two methods to implement it. This example is based on Angular JS Hello World Example, you can read it first.

Before dive into detail source code, let us first look at the example result page. There are two ul list, the above is implemented by a custom angular component ul-list ( render the list data directly in template html ), the bottom is implemented by ul-list and single-item custom angular module ( ul-list template html page use single-item component selector tag to render each array data. ).

angular js ul list example page

1. Display List Data In One Angular JS Component.

First you need to create an angular js project folder, please refer Angular JS Hello World Example.

Then run below command in hello-world directory to create ul-list component.

$ ng generate component ul-list

It will generate below component source files under src / app / ul-list folder. We will focus on ul-list.component.ts and ul-list.component.html.

angular js ul-list module files

ul-list.component.ts

This is the ul-list component class definition file.

import { Component, OnInit } from '@angular/core';

@Component({
  // The html tag selector is app-ul-list.
  selector: 'app-ul-list',
  // Below is render template html and css files.
  templateUrl: './ul-list.component.html',
  styleUrls: ['./ul-list.component.css']
})
export class UlListComponent implements OnInit {

  // Declare language title attribute.
  languageTitle : string;

  // Declare languageArray string array attribute.
  languageArray : string[];

  // Declare os title attribute.
  osTitle : string;

  // Declare osArray string array attribute.
  osArray : string[];

  constructor() {

    // Init attributes values in the class constructor method.
    this.languageTitle = 'Below is coding language list.';
    this.languageArray = ['Java', 'JavaScript', 'Angular JS', 'Node JS', 'Spring', 'Android'];

    this.osTitle = 'Below is operation system list. ';
    this.osArray = ['Windows', 'Linux', 'MacOS', 'Unix', 'Android', 'IOS'];
  }

  ngOnInit() {
  }

}

ul-list.component.html

This is ul-list component ui rendering html file. There are two parts in this file.

  1. Part1 use ngFor command to get each language value from languageArray array and print the value as li content.
  2. Part2 use ngFor command to get each os value from osArray and assign the os value to app-single-item tag’s implementation class’s  item attribute value. Then display the item value in app-single-item tag.
  3. ngFor command is a repeat command. It’s value is ‘let variable_name of array’ means get each array value and assign that value to variable_name.
<!-- Part1 : Display class languageTitle attribute value. -->
<h3>{{languageTitle}}</h3>

<!-- Use ngFor to loop in the class languageArray array and display each language. -->
<ul *ngFor="let lauguage of languageArray">

  <li>{{lauguage}}</li>

</ul>

<!-- Part2 : Display class osTitle attribute value. -->
<h3>{{osTitle}}</h3>

<!-- Invoke another component to display each array item value.

     app-single-item is another custom component.

     *ngFor="let os of osArray" : use ngFor command to iterate the osArray array.

     [item]="os" : assign each os value to app-single-item's item attribute.

     Then app-single-item will display the item value in it's render template html file ../single-item/single-item.component.html
-->
<app-single-item
  *ngFor="let os of osArray"
  [item]="os" >
</app-single-item>

2. Display List Data Use Two Angular JS Component.

ul-list component can display each array data in ul -> li html tag directly in Part1, it can also display each array data in app-single-item component in Part2. Below is just the source code for app-single-item module.

angular js single-item module files

Go to hello-world folder and run below command to create single-item component.

$ ng generate component single-item

single-item.component.ts

Because the class variable item’s value is passed from ul-list component, so you should import Input component and decorate item with @Input().

// Add Input decoration component in the import section.
import {Component, Input, OnInit} from '@angular/core';

@Component({
  // Component selector html tag.
  selector: 'app-single-item',
  templateUrl: './single-item.component.html',
  styleUrls: ['./single-item.component.css']
})
export class SingleItemComponent implements OnInit {

  /* Input() annotation means item attribute value is passed from outside.*/
  @Input()
  item : string;

  constructor() { }

  ngOnInit() {
  }
}

single-item.component.html

<ul>
  <!-- Display the component class item value -->
  <li>{{item}}</li>

</ul>

To make the example execute, you must change hello-world / src / app / app.component.html file content to below.

<!-- Use the custom ul-list component selector tag. -->
<app-ul-list></app-ul-list>

Double click hello-world / src / app / app.module.ts file, you can find all the component has been imported and declared in it’s module declarations area.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { HelloWorldTagComponent } from './hello-world-tag/hello-world-tag.component';
import { UlListComponent } from './ul-list/ul-list.component';
import { SingleItemComponent } from './single-item/single-item.component';

@NgModule({
  declarations: [
    AppComponent,
    HelloWorldTagComponent,
    UlListComponent,
    SingleItemComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
(Visited 55 times, 1 visits today)

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.