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>
Related
In my App component I have a navbar. This navbar is visible in all the chilren of my app component. I want to hide the navbar in one of the children. In order to achieve that I decided to use a ternary operator in order to apply a classname on the navbar component.
If the window.location.href is equal to the url of the component in which I want to hide the navbar, then a classname that hides the navbar is applied. However, my code is not working. I can still see the navbar in the component in which I want to hide it. When I inspect the document, I note that the classname that hides the navbar is not being applied. This is my code
<div className={window.location.href==='http://localhost:3001/checkin'
?
"navbar-hide"
:
"navbar"
}>
<Link to="/login">Login</Link>
<Link to="/EventManager">EventManager</Link>
</div>
The classname navbar is present regardless of the window.location.href.
I defined a custom-element using web componenet:
<universal-form>
<slot name="inner-input">
</universal-form>
This custom-element itself is placed inside another shadow dom:
<my-dashboard>
#shadow-root
<div id="shadow-container">
<universal-form>
...
<input type="datepicker" id="to-be-exposed" slot="inner-input"/>
</universal-form>
</div>
...
</my-dashboard>
** note: for some of you might suggest putting the <universal-form> inside a slot of the <my-dashboard>, instead of placing it directly into the <my-dashboard> shadow-root, this route is ruled out because of some other implementation requirements.
Now I'd like to be able to style the input#to-be-exposed from the webpage's css file, so it needs to be accessible from the light dom when the document is rendered ready.
What is some best practice to achieve this?
An option would be to drop the shadowDom form the dashboard element in this case as an element that has a shadow attached doesn't have a light dom visible anymore.
The element won't mind that, things that are leaking in are exactly what you want, namely style from the parent window.
Implementation is simple, instead appending elements to the attached shadow append them directly in to the element.
Example of a shadowless element :
class MyElement extends HTMLElement {
constructor(){
super();
this.innerHTML = `elements here`;
}
}
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 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.
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.