Develop Reference

Angular material mat-menu reloading the page

So I added the simplest example of mat-menu to my project but from some reason when I click on the Menu button it is reloading the page. Here is the code.
<button mat-button [matMenuTriggerFor]="menu">Menu</button>
<mat-menu #menu="matMenu">
<button mat-menu-item>Item 1</button>
<button mat-menu-item>Item 2</button>
</mat-menu>

Resolved myself. type="button" made the trick

Problem aligning two elements inside a button on bootstrap

I'm trying to stick two texts horizontally inside a button by using Bootstrap 4.
The word "Link" is always pushed to the next line and I want it to be next to "Copy".
I've tried using Float but it pushes "Link" too far to the right.
<div className="col-3 w3-button w3-tiny">
<button
onClick={() => {
this.copyReferralLink();
}}
className="btn btn-block btn-primary"
>
{this.props.t("Copy")}
<span className="d-none d-sm-block btn-primary float-right">
{this.props.t("link")}
</span>
</button>
</div>
This is what I have so far, any help is appreciated!

You'd use d-sm-inine-block instead of d-sm-block class.
Additionally you might want to wrap this.props.t("Copy") into a span of its own.

How to wrap mat-list-item in mat-button in Angular

I have a list and I would that every element of the list become clickable with a ripple effect like mat-button component.
I tried this :
<mat-list role="list" *ngFor="let userS of Projet?.backlog.userStory; let i=index">
<button mat-button>
<mat-list-item role="listitem">User Story #{{i}} : {{userS.userStory}} </mat-list-item>
</button>
</mat-list>
But I that's don't working element are not clickable .

I would put the <button> inside the <mat-list-item>. Not sure if this will help because I think the button should still work the way you have it.
<mat-list role="list">
<mat-list-item role="listitem">
<button mat-button>
User Story #{{i}} : {{userS.userStory}}
</button>
</mat-list-item>
</mat-list>

Button list items are now directly supported
Action lists are now available, and let you render a list with buttons as the list item element. Simply change the parent component to mat-action-list and use a button with the mat-list-item directive!
https://material.angular.io/components/list/overview#action-lists
<!-- Example is from https://material.angular.io/components/list/overview#action-lists -->
<mat-action-list>
<button mat-list-item (click)="save()"> Save </button>
<button mat-list-item (click)="undo()"> Undo </button>
</mat-action-list>

vue v-if/v-else does not remove style from buttons

I am using vuejs2 for my webapp with bootstrap.
I have two blocks with v-if and v-else, so only one of those renders. I have bootstrap button in each of these blocks. When I press the button from first of div, second div becomes visible and vice versa.
Problem is when I click button of first div, button of second div appears, but still it is focussed, I want to have a normal button, but it is focussed with outline.
Here is simplified code:
<div id="app">
<div v-if="switc">
<button type="button" class="btn btn-secondary" #click="switc = !switc">
<span >First</span>
</button>
</div>
<div v-else>
<button type="button" class="btn btn-secondary">
<span>Second</span>
</button>
</div>
<br> <br>
<button type="button" class="btn btn-secondary" #click="switc = !switc">
<span>Switch</span>
</button>
</div>
Here is working fiddle, if you press first button, second still shows outline.

I missed this: key in v-if/else in docs. Vue tries to render elements as efficiently as possible, often re-using them instead of rendering from scratch. It seems in my case as well it is using the same component and re-rendering it completely.
To fix it I just need to add key field in each button, like following:
<div v-if="switc">
<button type="button" class="btn btn-secondary" #click="switc = !switc" key="first">
<span >First</span>
</button>
</div>
<div v-else>
<button type="button" class="btn btn-secondary" key="second">
<span>Second</span>
</button>
</div>
Updated fiddle here.

Radio button don't work with UiBootstrap

I need this time a help with this example:
DEMO
You can see that the css on example 1 goes good. When you click on the button the state of the button change (press)
On example 2 i can't do the same. on my app i need that the "radio button" appear on vertical line (i get it).
But when i press the button, when i click out i back to the first state (don't press)
<h4>Exmaple 2</h4>
<div class="btn-group" data-toggle="buttons-radio">
<div class="row" ng-repeat="company in vm_login.decimals">
<button type="button" class="btn btn-primary" ng-model="radioModel.id" btn-radio="company.id">
{{company.desc}}
</button>
</div>
</div>
Can anybody help me?

I got a final version and this is how i need
DEMO
Thanks for all
<div class="btn-group-vertical" >
<button ng-repeat="value in vm_login.options"
class="btn btn-primary"
type="button"
ng-model="vm_login.model"
btn-radio="value.id">
{{value.desc}}
</button>
</div>
<p>texto aqui: {{vm_login.model}}</p>

This worked for me try this approach in one line without using buttons:
<div class="btn-group">
<label class="btn btn-primary" ng-repeat="company in vm_login.decimals" ng-model="radioModel" ng-model="radioModel.id" btn-radio="company.id">{{company.desc}}</label>
</div>

The btn-group classed element expects it's children to be buttons (a btn classed element). Not a div element. Take out the div and move the ng-repeat to the actual button. Now if you want your button to align verticaly you'll need to use btn-group-vertical instead of btn-group as stated in the bootstrap documentation. Here's the update code:
<div class="btn-group-vertical" data-toggle="buttons-radio">
<button ng-repeat="company in vm_login.decimals" type="button" class="btn btn-primary" ng-model="radioModel.id" btn-radio="company.id">
{{company.desc}}
</button>
</div>
Updated Plunker: http://plnkr.co/edit/kVFqNAXisMgkMVqy0WAF?p=preview