Angular material 2 button toggle by default selected

angularangular-material

in angular material 2, How can I set default selected button in toggle group.

It does toggle once I tap one, but both selected by default somehow.
I tried as follows, but doesn't work.

  <md-button-toggle-group #group="mdButtonToggleGroup">
    <md-button-toggle (click)="firstTapped()" selected>
      <span>one</span>
    </md-button-toggle>
    <md-button-toggle (click)="secondTapped()">
      <span>second</span>
    </md-button-toggle>
  </md-button-toggle-group>

Best Answer

You need to assign each button a value and then you can give the group an initial value (matching one of the buttons);

<md-button-toggle-group #group="mdButtonToggleGroup" value="button1">
    <md-button-toggle value="button1">
      <span>one</span>
    </md-button-toggle>
    <md-button-toggle value="button2">
      <span>second</span>
    </md-button-toggle>
  </md-button-toggle-group>

Related Solutions

Css – Angular 2: How to style host element of the component

There was a bug, but it was fixed in the meantime. :host { } works fine now.

Also supported are

:host(selector) { ... } for selector to match attributes, classes, ... on the host element
:host-context(selector) { ... } for selector to match elements, classes, ...on parent components
selector /deep/ selector (alias selector >>> selector doesn't work with SASS) for styles to match across element boundaries
- UPDATE: SASS is deprecating /deep/.
  Angular (TS and Dart) added ::ng-deep as a replacement that's also compatible with SASS.
- UPDATE2: ::slotted ::slotted is now supported by all new browsers and can be used with `ViewEncapsulation.ShadowDom
  https://developer.mozilla.org/en-US/docs/Web/CSS/::slotted

/deep/ and >>> are not affected by the same selector combinators that in Chrome which are deprecated.
Angular emulates (rewrites) them, and therefore doesn't depend on browsers supporting them.

This is also why /deep/ and >>> don't work with ViewEncapsulation.Native which enables native shadow DOM and depends on browser support.

Html – Binding select element to object in Angular

<h1>My Application</h1>
<select [(ngModel)]="selectedValue">
  <option *ngFor="let c of countries" [ngValue]="c">{{c.name}}</option>
</select>

StackBlitz example

NOTE: you can use [ngValue]="c" instead of [ngValue]="c.id" where c is the complete country object.

[value]="..." only supports string values
[ngValue]="..." supports any type

update

If the value is an object, the preselected instance needs to be identical with one of the values.

See also the recently added custom comparison https://github.com/angular/angular/issues/13268 available since 4.0.0-beta.7

<select [compareWith]="compareFn" ...

Take care of if you want to access this within compareFn.

compareFn = this._compareFn.bind(this);

// or 
// compareFn = (a, b) => this._compareFn(a, b);

_compareFn(a, b) {
   // Handle compare logic (eg check if unique ids are the same)
   return a.id === b.id;
}

Best Answer

Related Solutions

Css – Angular 2: How to style host element of the component

Html – Binding select element to object in Angular

Related Topic