CODEWITHSUNDEEP
htmlcssangular
Matt
Matt

Reputation: 463

Angular NgFor Elements Displayed Horizontally as Tags

I currently have a search feature that allows users to add search filters. E.g. if I add linear algebra, probability, and data science, the view will display a vertical list of each filter and an anchor tag: 

<div *ngFor="let term of searchTerms"> 
  <div style="display: inline-block;"> {{term}} </div>
  <a style="color: indianred; display: inline-block; padding-left: 6px;" (click)="removeTerm(term)">✖</a>
</div>

I'd like to display these elements horizontally, and I've looked into angular/flex-layout, but it is not compatible with the angular version 4.4.5

I've tried making each term a list element and wrapping it in a menu div and altering the CSS (https://stackoverflow.com/a/2145208/6521206) but this does not work either.

Secondarily I'd like to display the terms through some cleaner looking chips (for example). I've looked into some chip alternatives but these seem to be too heavyweight for my purposes. Is there a simple bootstrap or CSS implementation that offers a simple tag like this one?

Thank you!

Upvotes: 0

Views: 3922

Answers (3)

Matt
Matt

Reputation: 463

After searching bootstrap documentation and using user suggestions, I've put together this solution: 

<div class='container'>
    <div class="row">
          <div class="list-inline">
             <div *ngFor="let term of searchTerms" class="col-md-2" style="padding: 7px;">
                <div class="list-inline-item">
                    <span class="badge badge-pill"> {{term}} <a (click)="removeTerm(term)">✖</a>  </span> 
             </div>
          </div>
    </div>
   </div>
</div>

Upvotes: 0

kirankumar
kirankumar

Reputation: 135

<div *ngFor="let term of searchTerms"> 
  <div class="badge badge-primary"> {{term}} </div>
  <a style="color: indianred; display: inline-block; padding-left: 6px;" (click)="removeTerm(term)">✖</a>
</div>

If you want more stylish you can use button also.

Upvotes: 1

danday74
danday74

Reputation: 57016

In Bootstrap the closest thing to a chip is a badge - https://getbootstrap.com/docs/4.0/components/badge/

Upvotes: 0

Related Questions