Angular Button Segment 19+

Have you ever wondered how to create a button segment? Well, this could be a free-to-use alternative solution. I hope it helps with your projects with Angular.

Installation

Create new project or install in your current project

  ng generate new my-project
  cd my-project

Install with npm

  npm i angular-button-segment

Usage

Import the component

import { Component } from "@angular/core";
import { RouterOutlet } from "@angular/router";
import { AngularButtonSegmentComponent } from "angular-button-segment"; //<-- import the component
@Component({
  selector: "app-root",
  imports: [RouterOutlet, AngularButtonSegmentComponent], //<-- add in the imports
  templateUrl: "./app.component.html",
  styleUrl: "./app.component.scss",
})
export class AppComponent {
  //The loading parameter is optional, it only applies 
  // if you want to disable the buttons when you make a request.
  loading: boolean = false;
  
  eventValue: string = '';

  //receives the event emitted 
  // by the component
  onSegmentChanged(event: any) {
    //log to view the event
    console.log(event);

    //simulate load
    this.loading = true;

    //assign the received value to a variable
    this.eventValue = event;
    
    setTimeout(() => {
      this.loading = false;
    }, 3000);
  }
}

<angular-button-segment
  [segments]="[
                    {
                      title: 'danger',
                      value: 'test',
                      badgeCount: 4,
                      badgeColor: 'danger',
                    },
                    {
                      title: 'warning',
                      value: 'test-2',
                      badgeCount: 10,
                      badgeColor: 'warning',
                    },
                    {
                      title: 'info',
                      value: 'test-3',
                      badgeCount: 2,
                      badgeColor: 'info',
                    },
                    {
                      title: 'success',
                      value: 'test-4',
                      badgeCount: 9,
                      badgeColor: 'success',
                    },
                    {
                      title: 'default',
                      value: 'test-5'
                    },
                  ]"
  defaultSegment="test"
  [loading]="loading"
  (segmentChanged)="onSegmentChanged($event)"
/>
@if(eventValue.trim()!=''){
<hr>
  <!-- Print event value received -->
  <strong>Event Received:'{{eventValue}}'</strong>
}
<router-outlet />

Demo

You can see the demo here: 'https://stackblitz.com/edit/stackblitz-starters-1vmweelr?file=src%2Fmain.ts'

Author

• @myposty