I have a bootstrap button group in my Ember 2.2 app that looks like this:
<div class='btn-group' role='group' aria-label='...'>
<button type="button" class="btn btn-primary btn-xsm active={{aIsActive}}" >A</button>
<button type="button" class="btn btn-primary btn-xsm active={{bIsActive}}" >B</button>
<button type="button" class="btn btn-primary btn-xsm active={{cIsActive}}" >C</button>
</div>
'aIsActive', 'bIsActive', and 'cIsActive' are defined in the associated controller, and only one will be 'true' at a given time. The syntax shown above doesn't work. What's the proper way of doing this?
Here you go: if-helper
<button class="btn {{if aIsActive 'active'}}" >A</button>
btw, if you are creating navigation you should do it with link-to helper. It will add active class automatically when route is active.
Related
I have two buttons with inputs, like this:
<div class="input-group col-5 align-self-center">
<input id="endeDate" class="form-control" placeholder="dd.mm.yyyy" name="endeDate"
[minDate]="minDate" [markDisabled]="disableWeekend" [class.is-invalid]="checkValidity('dateEnd')"
ngbDatepicker #endeDate="ngbDatepicker" formControlName="dateEnd" (focus)="endeDate.toggle()">
<div class="input-group-append">
<button class="btn btn-primary calendar" (click)="endeDate.toggle()" type="button">
<fa-icon icon="calendar-alt"></fa-icon>
</button>
</div>
</div>
<div class="input-group col-5 align-self-center">
<input id="startDate" class="form-control" placeholder="dd.mm.yyyy" name="startDate"
[minDate]="minDate" [markDisabled]="disableWeekend" [class.is-invalid]="checkValidity('dateStart')"
ngbDatepicker #startDate="ngbDatepicker" formControlName="dateStart" (focus)="startDate.toggle()">
<div class="input-group-append">
<button class="btn btn-primary calendar" (click)="startDate.toggle()" type="button">
<fa-icon icon="calendar-alt"></fa-icon>
</button>
</div>
</div>
I need to write unit tests. Unit test has to check datepicker.
it('check Validation field Ende', () => {
let datepicker = fixture.debugElement.nativeElement.querySelector('button').endeDate.toggle();
expect(document.querySelector('.dropdown-menu.show')).toBeNull();
datepicker.click();
expect(document.querySelector('.dropdown-menu.show')).not.toBeNull();
});
But in first and second it opened the same first button.
I tried also this:
let datepicker =
fixture.debugElement.query(By.css('input[id=endeDate]'));
datepicker.nativeElement.click();
but it doesn't work.
Have somebody another Idea
Typically - with Angular being more of the UI component - I will not recommend doing this as a "unit test" from inside Angular. This is more of an end-to-end test you are performing, so why not make use of something like Selenium?
Also - you are selecting the element by CSS - highly recommend you do it by ID instead.
In my Angular 5 app I'm using ng-bootstrap but it's not appearing. I'm just trying to open it up the normal way from typescript:
private modalRef: NgbModalRef;
constructor(private modalService: NgbModal) {}
openModal(content) {
this.modalRef = this.modalService.open(content);
}
With a super simple HTML test.
<ng-template #content let-c="close" let-d="dismiss">
Hi mom!
</ng-template>
<button class="btn btn-lg btn-primary"
(click)="openModal(content)">Add AR</button>
I see that my openModal is in fact being called, but the dialog doesn't appear. No errors are being put into the console either.
Try:
<ng-template #content let-c="close" let-d="dismiss">
Hi mom!
<button class="btn btn-lg btn-primary"
(click)="openModal(content)">Add AR</button>
</ng-template>
I am migrating large application from bootstrap v2 to bootstrap 3.I am using Notepad++ to search using regular expression for searching for the old class names to replace. In bootstrap 3, btn class usage without any other in-built btn styles i.e btn-pimary,btn-success,btn-info,btn-warning,btn-danger,btn-link should be changed to btn btn-default.
So I need a regex pattern which finds btn occurrences in these lines
<button class="btn btn-mini" />
<button class="btn btn-small" />
<button class="btn btn-large"/>
<button class="btn"/>
<button class="btn "/>
<button class=" btn"/>
but does not find btn occurrences in
<button class="btn btn-mini btn-primary" />
<button class="btn btn-small btn-success" />
<button class="btn btn-large btn-info"/>
<button class="btn btn-error"/>
I have (?<=["'\s])btn(?=["'\s]) this regex but it searches for all btns including the btn-primary, btn-success etc. How to modify it so that it just matches the btn when it is used without the btn-primary, btn-success etc.
Try this:
(?<=class=")\s?btn\s?(btn-)?(mini|small|large)?\s?(?=")
Demo: https://regex101.com/r/VhwAym/2
Capturing only btn:
(?<=class=")\s?btn(?=\s?(?:btn-)?(?:mini|small|large)?\s?")
Demo: https://regex101.com/r/VhwAym/3
You don't even need lookarounds for this one - just some simple alternations will suffice, using the pattern
"\s*btn\s*(?:btn-(?:mini|small|large))?\s*"
Demo on Regex101
I am creating an app in django and I have the next problem: I want to add a glyphicon into the next button:
<input class="btn btn-primary" type=button name="name" onClick="location.href='/location/'" value='I am a button'>
Concretely, I want the glyphicon to be with the text 'I am a button'. How can I do it?
Thank you!!!
instead of using input type button, you should try using button element
so something like this
<button type="button" class="btn btn-primary" onClick="location.href='/location/'">
<span class="glyphicon glyphicon-music"></span> I am a button
</button>
add the class as the icon class. For example class="glyphicon glyphicon-off for power button. Moreover remove the value of the button.
Is there a way to refactor the following code to make it cleaner or is a {{#if}} the cleanest way to solve this?
{{#if isDirty}}
<button {{action 'save' this}} class="btn">Save</button>
<button {{action 'discard' this}} class="btn">Discard</button>
{{else}}
<button class="btn disabled">Save</button>
<button class="btn disabled">Discard</button>
{{/if}}
I prefer to solve this with CSS:
<button {{bindAttr class=":btn content.isDirty:enabled:disabled"}}>Save</button>
You could use CSS to prevent the clicks when disabled (if your target browsers support it). Or just let the clicks go through and only call commit/rollback if content.isDirty.
Another option would be to bind the disabled property of the button:
<button {{bindAttr disabled="content.isDirty:enabled:disabled"}}>Save</button>