Implemented following scenario
nextClassName={'text-hide'}
nextText={''}
nextIconComponent={
<RaisedButton
label='Next'
/>}
Now this provides me a Next Button with a wrapper div above button, and text-hide class is applied to that div not the button and hence border and background of next button remains as it is.
Please see screenshot http://imgur.com/a/AhBnc
make background and border outside NEXT button transparent, what should i do
The approach I have taken in this implementation is totally wrong.
What should be done is that create a custom pagination component with that component we will create a Next and Previous button and drop down select list for page number, and then include that custom component in the Griddle section
The value passed to customPagerComponent should be a React class, not simply jsx. To take your first example you would probably want to do this:
class MyCustomPagerComponent extends Component {
// boilerplate react stuff
render() {
// jsx for your component
}
}
Then in your Griddle jsx you would want to do:
import MyCustomPagerComponent from 'path/to/component';
<Griddle
...
customPagerComponent={MyCustomPagerComponent}
>
Both next and previous button will come in this new custom pagination component.
More info on this Griddle Issue
https://github.com/GriddleGriddle/Griddle/issues/530
Related
In my application, I have two components communicating with each other with BehaviorSubject since they are siblings. I have a form and a card, card can be either "question" or " answer" and its color changes accordingly.
To change it I use CSS variables. But I also want a "tilting" animation whenever the color changes.
I can't use angular animation because the animation is not data-binded related and in my application, the card component is nested inside various components that are animated with "angular animation" and it's not working anyway.
What I try to do is to bind a class with animation to my card main div but it only triggers when the component loads. What is the correct way to make my card tilt whenever its color changes?
Here is a stackblitz that describes my issue.
It can be done easily with Angular animations. Here is your example updated: https://stackblitz.com/edit/angular-ivy-aw3zs3?file=src/app/card/card.component.ts
You just need to provied a state function to handle the transtion trigger.
transition((fromState: string, toState: string) => toState != fromState, [
// animations
])
And you need to link the animation with the target variable
<div class="card" [style]="style" [#cardChange]="card.card">
</div>
I recently started learning Angular by doing a pet project.
In on of my components I use Angular's feature of conditionally applying classes to components based on the result of the predicate. Now the problem is that my click event fires and the .selected class is applied to the angular component, but when I try to change border color nothing happens. Strange thing is that I can apply some styles to that component by changing the content of the class.
enter image description here
enter image description here
Try to add display: block to the .selected class or add :host { display: block } in the .scss-file of your app-product-item.
I have a very niche use-case. I have to add a modal animation like this:
regular css animation
But I need to have a component (our own filter component for a datatable) inside said modal.
So I need to use the ModalService. But this service is only attaching my custom config like this:
toggleFilter = () => {
const modalOptions: ModalOptions = {
initialState: {
labels: this.datatableLabels, // needed for filter to have labels
filterGroups: this.filterGroups // needed to add filterGroups
},
class: 'filter-modal' // this sould be my custom class
};
this.bsModalRef = this.modalService.show(FilterComponent, modalOptions);
}
to modal-content and the above mentioned animation and styling uses divs above that. Not only it's working when encapsulation set toViewEncapsulation.None then it screws our other modals as well, since I cannot apply correct classes to the one I need to mess with.
How can I overcome this issue I'm having?
Instead of using the ModalService and open desired embedded component within the modal. You can basically inject the desired component into the body of the modal while using directive instead -> Here you are declaring the whole modal layout -> you can modify all the related classes so it's easier to modify a modal and have your ViewEncapsulation untuched so other modals are unaffected.
I have a modal that pops up with tab-able elements. Is there something like jQuery's :focusable or pointer-events: none that would allow me use CSS to disallow focusing on items underneath the overlay?
edit: The problem with a JS based approach (and selectors), is that each rerender with React, the query selector would have to be run through again. I don't have control over the component rendering this modal.
You want to do something along the lines of:
const inputs = [...document.getElementsByTagName('input')];
inputs.forEach((input) => input.setAttribute('tabindex', '-1'));
const modalInputs = [...document.querySelectorAll('.my-modal input')];
modalInputs.forEach((input, index) => input.setAttribute('tabindex', index));
Full Example https://codepen.io/bradevans/pen/GGYxrg
Edit: I hadn't seen the reactjs tag until OP commented... I'd utilize the Modals componentDidMount lifecycle method to change the underlying DOM inputs tab indexes and change the modals at the same time or using internal state....
You may also want to store the old tab indexes and reapply them on componentWillUnmount();
I'd like to ask for a little nudge to get my brain out of the box I got it into.
Context
Angular 4 using Angular CLI and AoT.
All methods mentioned in https://angular.io/docs/ts/latest/guide/component-styles.html describe ways to set complex CSS of a component while it is being written by a developer.
After a component is created, Angular allows to adjust individual styles and even assign various CSS class names to tags in the component as you please, all that using [ngClass], <div [class.something]="condition">, various #HostBinding decorators and some other methods.
However, none of the above can change the CSS declaration the component is using. The methods above can either (a) use what is already available in the stylesheet defined by the developer or (b) set individual CSS properties to individual HTML tags in the component's template.
Question
How would I update the CSS for the whole component on runtime so that all elements in that component respond to the new CSS?
Say I introduce a new style for a div.someClass and I want all matching elements div.someClass to reflect the new style.
Plunker
A showcase of my attempts is here: https://plnkr.co/edit/N2C40cSb7hd1AyOxWWdT
The button should be red, based on the value of MyChildComponent.styles
I think I understand why it doesn't work the way I would expect: shortly said, styles are built in the component during compilation, not runtime, including those found inside <style /> tags in the template.
But knowing why it doesn't work doesn't help me to make it work.
Any help highly appreciated.
Solution 1
Inserting a new css class is not possible ( as far as i know ) but you can insert css properties to your component dynamically.
I modified your dynamicStyles() to this
get dynamicStyles(): any{
return {'background': 'red' };
}
that returns an object instead of string because you will pass this object to ngStyle of your button.
In your template, I change the button like this
<button type="button"
[ngStyle]="styles">
Button
</button>
Here's a plunkr
Solution 2
This is something that I would not recommend but in your case it might be useful. You can add this
encapsulation: ViewEncapsulation.None
and the import
import {ViewEncapsulation} from '#angular/core'
to your #Component.You can leak your component's css so that you can use it on your child component. Then in your child component, add a [ngClass] in your button so that you can just pass a variable via #Input() if it should be red.
<button type="button"
[ngClass]="{'redButton': isButtonRed}"
>Button</button>
And in your style.css
.redButton{
background:red;
}
And in your main component.
<div>
<h2>Hello name</h2>
<my-child [isButtonRed]="true"></my-child>
</div>
Here's another plunkr
Hope this helps.