Items in the navigation list of Angular 6

https://i.sstatic.net/jJwqu.jpg

private commands = ['Comand1, Comand2, Comand3'];

    <div class="basic-container">
      <mat-nav-list>
        <mat-list-item (click)="menuTrigger.openMenu()" *ngFor="let i of commands">
          <div mat-line>
            {{ i }}
          </div>
          <p mat-line>
            {{ i }}
          </p>
          <button mat-icon-button>
            <mat-icon>more_vert</mat-icon>
          </button>
        </mat-list-item>
        <mat-divider></mat-divider>
      </mat-nav-list>
    </div>

I want items to be displayed vertically in sequence.

Cimmand1


Cimmand2


Cimmand3


Answer №1

Make sure to add a new line for each item in your loop output,

 <div class="basic-container">
  <mat-nav-list>
    <mat-list-item (click)="menuTrigger.openMenu()" *ngFor="let i of commands">
      <div mat-line>
        <p>{{i}}</p><hr/> <!--repeat this pattern-->
      </div>
      <button mat-icon-button>
        <mat-icon>more_vert</mat-icon>
      </button>
    </mat-list-item>
    <mat-divider></mat-divider>
  </mat-nav-list>
</div>

UPDATE: The problem was actually caused by the way the array was defined,

private commands = ['Comand1', 'Comand2', 'Comand3'];

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Layout your Angular components with a column design using Flex Layout

Is there a way to adjust the width of a child component in an fxLayout set to column? Take this example for reference: https://stackblitz.com/edit/angular-fxlayout-custom-breakpoints?file=app%2Ftest.component.ts In the provided example, there are three f ...

Unable to install vue-property-decorator

When attempting to set up Vue and TypeScript with class style using vue-property-decorator, I encountered a strange script after creating the project. I was anticipating a script like this: <script lang="ts"> import {Component, Vue} from & ...

Learn how to securely download files from an Azure Storage Container using Reactjs

I'm currently working on applications using reactjs/typescript. My goal is to download files from azure storage v2, following a specific path. The path includes the container named 'enrichment' and several nested folders. My objective is to ...

React doesn't have file upload configured to update the state

I am working on integrating a file upload button that sends data to an API. To ensure only the button triggers the upload dialog and not the input field, I have set it up this way. Issue: The File is not being saved to state, preventing me from using a ...

The combination of Angular Material 15 and Tailwind CSS 3.2.4 in an Angular project is causing a mismatch

I've implemented Angular 15 with Angular Material 15, and recently integrated Tailwind CSS following the guidelines provided on this link. However, after adding Tailwind CSS, there seems to be a design discrepancy in the material components: https:/ ...

The issue with ngbtypeahead in Angular 4 is the error stating that the property 'length' is not found on type '{}'

I am looking to add autocomplete functionality to a text field and have been attempting to do so using bootstrap typeahead. You can find the example I have tried to follow here: However, during compilation, I encountered the following errors: ERROR in C: ...

Encountering a fresh issue after updating to TS version 4.4.3 while accessing properties of the top "Object may be 'null'."

After upgrading my project to TypeScript 4.4.3 from 3.9.9, I encountered a change in the type declarations for the top property. My project utilizes "strictNullChecks": true, in its configuration file tsconfig.json, and is browser-based rather t ...

Error: "the cart variable in the ctx object has not been defined"

A project I'm currently working on involves a pizza ordering app, and my current focus is on implementing the Cart feature. Each user has their own cart, which includes specific details outlined in cart.ts import { CartItem } from './cartitem&a ...

Invoke a TypeScript function from the HTML code embedded within a TypeScript component

In my pop-up window, there are 2 buttons: Update and Delete. I need to implement functionality so that when the Update button is clicked, the current pop-up should disappear and a new editable pop-up with the same fields should appear, along with two addit ...

Evaluate Angular component through unit testing by employing tick and fakeAsync to handle Observables efficiently

Although I have come across similar questions multiple times, I couldn't find a precise solution. There are numerous solutions available which can be confusing for someone like me who has recently started working with Angular. Here is an example of a ...

Firebase: Unexpected behavior observed when editing data - duplicate entries

Utilizing Firebase and Ionic framework (written in TypeScript). When inserting a new entry (using the push method) into a collection (groups), it displays numerous temporary groups. I have subscribed to them using the on() method and trigger an event when ...

Utilize a ReplaySubject to capture and replay only the most recent value from an observable stream

Here is my ReplaySubject setup: matchCount = new ReplaySubject<number>(); totalCount = new ReplaySubject<number>(); This is how I am utilizing it: getMatchedEventsCount(){ return this.dcs.matchCount.asObservable(); } getTotalEvent ...

How to filter an array in Angular 4 without the need for creating a new array and then displaying the filtered results within the same

In my collection of students, I have their names paired with their academic outcomes. studentResults = [ {name: 'Adam', result : 'Passed'}, {name: 'Alan', result : 'Failed'}, {name : 'Sandy', result : &ap ...

Utilizing type maps within nested objects in Typescript: A comprehensive guide

Initially, a type is established that connects enum keys with specific types: enum MyEnum { A, B } type TypeMap = { [MyEnum.A]:string, [MyEnum.B]:number } interface ObjInterface<T extends keyof TypeMap> { obj: T, objData: Ty ...

Encountering a TypeError when using Webpack and ts-loader to bundle a third-party library

While everything compiles and bundles successfully, a TypeError is encountered in the browser: "box2dweb_commonjs_1.default is undefined." No errors occur when starting webpack-dev-server and reviewing the bundle at http://localhost:8080/webpack-dev-serv ...

leveraging lite server with actual data

Working with Lite server and Browser-sync has been a great experience for quick UI programming. However, I've encountered an issue when attempting ajax calls to retrieve data from my actual web server. It seems like a fundamental task to fetch json o ...

Testing the unit: when subscribing to an observable, the returned value is

Currently, I am working on developing an application with Ionic and Angular. However, I encountered a problem during unit testing where the return value is undefined, even though the app runs correctly. In my code: auth.service.ts login(email: string, p ...

How do I modify a response within a subscribe in Angular?

Having a scenario where multiple components are utilizing a function that expects an array of objects to be returned. However, there is one specific case where I need to modify the array based on the return value from an observable before returning it: let ...

The error code TS2322 indicates that the type 'object' cannot be assigned to type 'NgIterable<any>'. Furthermore, the type 'object' is not compatible with type 'Iterable<any>'

I'm attempting to utilize the HTTP library within Angular to retrieve information from a link containing a JSON file, but unfortunately, I am encountering some issues with it. api.server.ts: import { Injectable } from '@angular/core'; impor ...

Creating a variable within an Angular template: A step-by-step guide

I'm working with the following template: <div> <span>{{aVariable}}</span> </div> and I want to transform it into: <div "let a = aVariable"> <span>{{a}}</span> </div> Is there a way to ach ...