CODEWITHSUNDEEP
angular
pennyBoy
pennyBoy

Reputation: 397

Button selection: Angular

Is it possible to make multiple selections for a button, something like a checkbox where you could choose multiple options. In my case, I would want to select two buttons then use the ids from the selected the button and transfer their information over to another page. Any insights or solutions on how to go about doing that is much appreciated. Below is an image I knocked up with functionality I would want to have. On the next page It would display names of titles selected like "testing and mocking metric" I guess that's not important. I assume the route/url would have both id numbers in it. Something to the effect of http://localhost:4200/compare/1&3. Also below are snippets of my program which includes my html file, .ts file and app-routing.module.ts

import { Component, OnInit } from '@angular/core';
import { Domain } from '../library';
import { DOMAIN } from '../domain-names';


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


  domain = DOMAIN;

  selectedDomain: Domain;

  onSelect(dom: Domain): void {
    this.selectedDomain = dom;
  }



  constructor( ) {
  }


  ngOnInit() {

  }

}
ul {
   padding: 0;
   width: 1200px;
   margin: 20px auto;
 }

li{
   display: inline;
}

h2{
  text-align: center;
}

.btn-info{
  margin: 6px;
}

.button-row{
  margin: auto;;
}

.btn-outline-light {
    padding: 6px;
    border: 4px solid #eee;
    box-shadow: #555 1px 1px 8px 1px;
    height: 160px;
    width: 200px;
    color: black;
}
<h2> Visualized Metrics By Domain </h2>
<div class="button-row">
  <ul id="thumbnailslist">
    <li *ngFor="let dom of domain" (click)="onSelect(dom)">
      <a routerLink="/domain/{{dom.id}}">
        <button type="button" class="btn-outline-light">{{dom.catergory}}</button>
      </a>
    </li>
  </ul>
</div>

import { NgModule }  from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { CompareComponent } from './compare/compare.component';
import {  DomainCompareComponent } from './domaincompare/domaincompare.component';



const routes: Routes = [
  { path: '', redirectTo: '/dashboard', pathMatch: 'full' },
 
  { path: 'compare', component: CompareComponent },
  { path: 'compare/:id', component: DomainCompareComponent}

];

@NgModule({
  imports: [ RouterModule.forRoot(routes
  ) ],
  exports: [ RouterModule ]
})
export class AppRoutingModule {}

Upvotes: 0

Views: 224

Answers (1)

Roberto Zvjerković
Roberto Zvjerković

Reputation: 10157

Don't use buttons, since you probably don't want any immediate action. And they are harder to style anyway.

<li *ngFor="let dom of domain" (click)="onSelect(dom)">
    <div [style.background-color]="isSelected(domain) ? 'red' : 'white'" (click)="toggleDomain(domain)"></div>
</li>

And in component:

selectedDomains: Domain[];

toggleDomain(domain: Domain) {
    if(this.selectedDomains.includes(domain)) {
        this.selectedDomains.splice(this.selectedDomains.indexOf(domain), 1);
    } else {
        this.selectedDomains.push(domain);
    }
}

isSelected(domain: Domain) {
    return this.selectedDomains.includes(domain);
}

Then you have an array of selected domains, which you can easily send to the other component.

Next page component will probably need to receive the data as input: 

<next-page-selector [domains]="domains"></next-page-selector>

@Input() domains: Domain[];

So you can show selected component names. Next component template:

<span *ngFor="let domain of domains">{{domain.name}}</span>

Upvotes: 1

Related Questions