In a conditional sense. So, if the screen is a certain size, set an attribute
Pseudo-code:
<mat-sidenav class="sidenav" fixedInViewport="true"
[opened]="! (fxLayout.xs | fxLayout.sm)">
</mat-sidenav>
So, if the screen size is small, then sidenav should not be opened by default.
Is this possible? Perhaps using ngIf, but I can't think of a way.
you can achive such behaviour by using MediaObserver::isActive()
first, inject MediaObserver service:
...
constructor(public mediaObserver: MediaObserver) {}
...
then use it in your template as follows:
<mat-sidenav class="sidenav" fixedInViewport="true"
[opened]="!(mediaObserver.isActive('xs') || mediaObserver.isActive('sm'))">
</mat-sidenav>
Related
I am displaying sanity block content using [#sanity/block-content-to-react](#sanity/block-content-to-react). The BlockContent component is wrapper by div with class of "prose".
<div className="prose prose-zinc font-display prose-h1:font-normal prose-code:mx-1 prose-code:before:content-none prose-code:after:content-none dark:prose-invert ">
<BlockContent
// Pass in block content straight from Sanity.io
blocks={singleBlog.body}
serializers={serializers}
/>
</div>
In my serializers, I am passing custom <Code/> component.
const serializers = {
types: {
code: (props) => <Code props={props} />,
},
};
In my custom code component, I am using Syntax Highlighter to wrap by code content.
<SyntaxHighlighter style={theme} language={props.node.language}>
{props.node.code}
</SyntaxHighlighter>
But, no matter which theme I choose, it only changes the background colors and font sizes but has no effect in text colors.
I thought 'prose' class on wrapper div was causing the problem. But remove that didn't work either.
{/* <div className="prose prose-zinc font-display prose-h1:font-normal prose-code:mx-1 prose-code:before:content-none prose-code:after:content-none dark:prose-invert "> */}
<BlockContent
// Pass in block content straight from Sanity.io
blocks={singleBlog.body}
serializers={serializers}
/>
{/* </div> */}
Does anyone have any solution ?
I am not sure if you are using a custom theme or if you are using one of the many option. But if you are using the available one that you can find here: https://react-syntax-highlighter.github.io/react-syntax-highlighter/demo/prism.html
Then it may be a problem with your imports.
If I import the theme like that (using the hljs ): import {dark} from "react-syntax-highlighter/dist/esm/styles/hljs"; I only get background color.
If I import the theme like this using the 'prism' option I get the text color too: import {dark} from "react-syntax-highlighter/dist/esm/styles/prism";
I've the following accordion group:
<p-accordion multiple=true>
<p-accordionTab *ngFor="let tab of tabs" styleClass="{{tab.myClass}}" header="{{tab.header}}"
[selected]="false">
{{tab.description}}
</p-accordionTab>
</p-accordion>
It's usually populated dinamically by tabs size. The goal is to have different background and other styles, depending of tab content. So I have that myClass style variable which could change at each accordion tab creation. E.g. assuming to use myClass = 'myClass':
:host ::ng-deep .myClass.p-accordion {
.p-accordion-header:not(.p-disabled).p-highlight .p-accordion-header-link {
background: red;
}
}
Anyway I was not able to create a css rule to achieve this goal.
Can anyone assist?
Many thanks in advance
Solution was using a wrapper div of each accordion tab:
<p-accordion multiple=true>
<div *ngFor="let tab of tabs" class="{{tab.customClass}}">
<p-accordionTab header="{{tab.header}}"
[selected]="false">
{{tab.description}}
</p-accordionTab>
</div>
</p-accordion>
where :
.customClass * {
background: red !important;
//other properties
}
In order to create a different style for each tab you need to make it dependent on the tab. Right now you set the same style for each. One approach would be to create a pipe which provides the class name.
<p-accordionTab *ngFor="let tab of tabs" styleClass="{{tab | getTabClass}}" header="{{tab.header}}"
I want to implement the show/hide feature of the play and pause buttons on a list of tracks in angular 7. I originally got this feature partially working using angular animation, but my method would change the state of all buttons in my list instead of a single item. I've also tried using ngClass but couldn't seem to get it working right.
Below is my latest efforts. Please help me.
<mat-card class="track-box" *ngFor="let track of tracks" cdkDrag>
<div class="custom-placeholder" *cdkDragPlaceholder></div>
<span>
<mat-icon
class="play-button md-48"
[ngClass]="{'show' : track === selectedTrack}"
(click)="toggle(track)"
> play_circle_outline</mat-icon>
<mat-icon
class="pause-button md-48"
[class.selected2]="track === selectedTrack"
(click)="toggle(track)"
>pause_circle_outline</mat-icon>
</span>
I would have to disagree with #Tomato 's answer, as per my comment on his answer.
However, what I would recommend is using Angular's NgClass which is similar to ngIf. But here's the catch.
When it comes to ngIf, you're creating 2 components, hiding one and showing the other, and doing that operation over and over again. Which is not the best code practice.
However, in the case of ngClass, you're creating one component and 2 separate SCSS classes for the same component. Whenever a certain condition is satisfied, one SCSS Class gets applied, and so forth.
HTML File
<span>
<button
class="play-pause-button"
[ngClass]="toggle(track)"></button>
</span>
TS File
export class Component {
let isPlay = false;
public toggle(track: string) {
this.isPlay = !this.isPlay;
this.isPlay ? return 'play-button'; : return 'pause-button'
}
}
That way, the toggle() function will return a SCSS class name based on the current status of the button itself.
Using ngClass
You could change the shown button icon by using ngClass as following:
<mat-card class="track-box" *ngFor="let track of tracks" cdkDrag>
<div class="custom-placeholder" *cdkDragPlaceholder></div>
<span>
<mat-icon
class="md-48"
[ngClass]="{'play-button' : track != selectedTrack,
'pause-button' : track === selectedTrack}"
(click)="toggle(track)">Some output here</mat-icon>
</span>
</mat-card>
Using ngIf
You could maybe use an ngIf (docs) to show/hide the buttons, though as Chris pointed out, this creates two elements for every track in your list and could cause performance issues on a very huge list.
<mat-card class="track-box" *ngFor="let track of tracks" cdkDrag>
<div class="custom-placeholder" *cdkDragPlaceholder></div>
<span>
<mat-icon
class="play-button md-48"
*ngIf="track != selectedTrack"
(click)="toggle(track)">play_circle_outline</mat-icon>
<mat-icon
class="pause-button md-48"
*ngIf="track === selectedTrack"
(click)="toggle(track)">pause_circle_outline</mat-icon>
</span>
</mat-card>
When your selectedTrack does not equal the track, show the play-button, if it is the same track, show the pause-button.
You could also use the if-else-block for this (from the docs):
<div *ngIf="condition; else elseBlock">Content to render when condition is true.</div>
<ng-template #elseBlock>Content to render when condition is false.</ng-template>
I have an image (inside a material card) which changes every 30 seconds. I have the height of the image (as a TS variable) and I want to set it as the height of the loaded image. I tried the below approach but I think that the syntax is wrong. What is the right approach?
#Component({
selector: 'app-live',
templateUrl:
<mat-card [ngStyle]="{'min-height': '{{taille}}'}">
<img mat-card-image [src]="profileUrl | async " alt="Streaming de la culture" #img [ngStyle]="{'padding-top':'0px' }" (load)="dosomething(img)">
</mat-card>
export class LiveComponent implements OnInit {
taille;
dosomething(img) { console.log(img.clientWidth, img.clientHeight);
this.taille = img.clientHeight;
console.log(this.taille);}
The {'min-height': '{{taille}}'} part should in fact be {'min-height': taille}.
Angular documentation presents the below very similar example:
<div [ngStyle]="{'color': colorPreference}">
From your sample code it seems that taille is initially undefined which you might want to take into account (initialize taille or use a ngIf or other approach).
Using [ngStyle] -
<mat-card [ngStyle]="{'min-height': taille}">
Or you can use [style.min-height] = "taille" instead.
<mat-card [style.min-height] = "taille">
please go through this for more insights.
In this implementation below, I got an md-sidenav component with a local template variable #sidenavsearchArea.
<md-sidenav #sidenavSearchArea align="" mode="push" opened="false">
sidenav content here..
</md-sidenav>
I'd like to style the area where it says "sidenav content here.."
How do you refer to this section from the styles.css?
md-sidenav #sidenavSearchArea {
/* does not seem to be the right way */
}
My only solution was to break the DRY principle and introduce a new ID ( id="sidenavSearchArea" into the component ) and do it the old school way, like this:
<md-sidenav id="sidenavSearchArea" #sidenavSearchArea align="" mode="push" opened="false">
sidenav content here..
</md-sidenav>
style.css
#sidenavSearchArea {
/* this approach works but not DRY */
}
Is there a better way to achieve the same thing without the addition of id=""?
Template variables are only for Angulars internal use. They are never added to the DOM and therefore not available for CSS styling.
You need to additionally add something that is available to CSS selectors, like a class:
<md-sidenav class="sidenavSearchArea" #sidenavSearchArea align="" mode="push" opened="false">
sidenav content here..
</md-sidenav>
md-sidenav.sidenavSearchArea {
/* does not seem to be the right way */
}
.mat-drawer{
background-color:red;
}
plunker