I am trying to add a custom css class directive to my button, but whenever I do that, the angular material design goes away and the button goes back to its default ugly state. How can I make sure that my custom css class gets added to the button without it removing the mat-buutton effects?
<button
mat-button
[class]="todoItems.completed ? 'delete': null"
(click)="deleteTodo(todoItems._id)"
[disabled]="!todoItems.completed">
<mat-icon >delete</mat-icon>
</button>
Here is the css
.delete:hover {
color: red
}
I want my class to be applied only if the completed property is true and when that property is true the delete button will turn red when I hover on it.
The hovering part works fine but the problem I have is that the material design disappears and it turns into the default style of button
mat-button applies its own css classes to the <button> at run time.
When you are doing [class]="todoItems.completed ? 'delete': null" it is hard overridding these classes.
To append your class to the existing ones, you need to use ngClass instead.
Related
In my html template I have two common component
If I click on app-headers link its active class is applied.After that If i click on sidenavbar's link its active class is applied. At a time I want only one active class be applied between two child component. what changes can be done from parent component so only one components active class is applied.
I tried by :host ::ng-deep in scss , but I am not able to make it conditional. I want this changes be reflected only, when I click on other components . But its ovverriding child components css.
You could have a flag when they click make that as true and when other options clicked then make it as false and use it in required way. Here's an example below which changes the color based on colorFlag to true or false in css:
<div class="col-12 text-right" style="{{(colorFlag) ? 'color: red;':'color:blue;'}}">
<!-- Your Code Here -->
</div>
Is it possible to set transition to trigger only one way for the v-btn?
I created button with text that changes depending on the condition and use transition to change it smoothly. However if i change view and condition changes the transition reverses and it looks glitchy. I dont want this behaviour, and only would like to have transition trigger one way.
<v-btn
class="ma-1"
#click="addToList"
width
:disabled="isAdded"
>
<span v-if="!isAdded">
Add to List
</span>
<v-slide-x-transition>
<span v-if="isAdded">
Added
<v-icon>
mdi-check
</v-icon>
</span>
</v-slide-x-transition>
</v-btn>
Here is example how this works:
https://codepen.io/pokepim/pen/VwKNzxj?editors=101
In the carousel when you switch between slides you can see that button reverses back and it extends width and generally this looks somewhat glitchy. Is it possible to only keep transition when clicking on the button in this case (so no backward transition from disable to active button)?
EDIT:
I tried Dan's answer, and while it works fine with the carousel case it still does not solve glitchy transition in general, here is the example of same behaviour using method instead of computed property:
https://codesandbox.io/s/vuetifyvuex-store-testing-ground-wyl4n?file=/src/App.vue
There's only one isAdded condition being used for all of the slides. When that condition is false on the next slide, it gets set before the animation is finished and it looks bad.
Use a method instead of a computed for isAdded so each slide can maintain its own button state:
methods: {
addToList() {
this.btnlist.push(this.model);
},
isAdded(i) {
return this.btnlist.includes(i);
}
}
And change all isAdded in the template to isAdded(i).
Here's the updated demo
To your edit, try the hide-on-leave attribute on the transition:
<v-slide-x-transition hide-on-leave>
<span v-if="isAdded(this.idUn)">
Added
<v-icon> mdi-check </v-icon>
</span>
</v-slide-x-transition>
I use ngbootstrap for popovers, but I want to override all the default styles it comes with. I have a form that should be displayed as a popover on a button click which has its own styles.
When I use [ngbPopover] it renders an element with the default class of 'popover' applied, instead of overriding each of its properties to align with my expectation, is it possible to remove it all together while rendering on the page and then I could use a custom class with popoverClass property.
<ng-template #popContent><user-form></user-form></ng-template>
<button type="button" class="btn btn-outline-secondary" [ngbPopover]="popContent">
I've got markup and bindings in my popover!
</button>
Looking into the popover source code I see lots of classes nailed without a chance to change them. I suppose the only promising approach would be exclude the css for the popover component from the import.
How to do it depends on how you import the Bootstrap css
I have 3 buttons "Home","About" and "Contact". On page load I want only the "Home" button to be active. After clicking the "About" button, only the "About" button should be active and the rest 2 buttons not active. Similarly, after clicking the "Contact" button, only the "Contact" button should be active and the rest 2 buttons not active.
The word "active" here means that the button having different CSS (when compared to the other 2 buttons). I am using AngularJS as my front-end JS.
You will want to read up on the documentation for the Angular ngClass directive.
With ngClass you can bind a css class to a variable in your view.
Assuming you set the page on your $scope.
JS (inside your angular controller)
$scope.page = 'home';
HTML
<li ng-class="{'active': page == 'home'}" ng-click="page = 'home'">Home</li>
CSS
<style type="text/css">
.active {
background: blue;
}
</style>
If you're using ui-router then there's a directive called ui-sref-active which adds custom class when particular state is active.
http://angular-ui.github.io/ui-router/site/#/api/ui.router.state.directive:ui-sref-active
Here's a working jsfiddle which shows how it works. Point student.profile state which adds active class also on student state.
I have an issue with the angular ng-show directive.
I have 2 buttons which are working like a toggle button.
index.html
<button class="btn btn-primary"
ng-show="!isShow"
ng-click="showDeleted()">
Show deleted items
</button>
<button class="btn btn-primary"
ng-show="isShow"
ng-click="showDeleted()">
Hide deleted items
</button>
myController.js
$scope.showDeleted = function(){
$scope.isShow = !$scope.isShow;
};
When i click on the button everything is working fine, but in IE10 I can see the hided button flickering. Here is a plunkr if you need one.
Thank you!
Did you try ng-cloak
https://docs.angularjs.org/api/ng/directive/ngCloak
The ngCloak directive is used to prevent the Angular html template from being briefly displayed by the browser in its raw (uncompiled) form while your application is loading. Use this directive to avoid the undesirable flicker effect caused by the html template display
I think all angular apps (that doesn't use ng-include to load template)
should use ng-cloak to prevent to hide all templates until angular compiles it.