Im using Angular 7 and Angular material matTooltip.
I want that the tooltip displays every element in the next line, something like this:
But, instead I'm getting this:
I got 3 elements per line, and I don't want that. I want one element/line.
My code is as follows:
app.component.ts
items=['15-09-2020: 200','16-09-2020: 200','17-09-2020: 200', '18-09-2020: 200'];
newItems = this.items.join("\r\n");
app.component.html
<div class="col col-sm-2" matTooltipPosition="after" matTooltip="{{ items}}"></div>
Check this example that is not working for me:
Stackbliz
Source : https://www.angularjswiki.com/material/tooltip/
It's a bit late, to people who want to have breaklines in the tooltip,
you create a custom class in your global CSS and add this class with "matTooltipClass".
HTML
<button mat-raised-button
matTooltip="Multiline Tooltip
This is second line"
matTooltipClass="multiline-tooltip">
Multiline tooltip
</button>
Global CSS
.multiline-tooltip{
white-space: pre-line;
}
You can also add in your specific component, you should add
encapsulation: ViewEncapsulation.None
to your component.ts
#Component({
selector: 'app-tooltip',
templateUrl: './tooltip.component.html',
styleUrls: ['./tooltip.component.scss'],
encapsulation: ViewEncapsulation.None
})
export class TooltipComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}
https://siderite.dev/blog/styling-angular-material-tooltips.html/
Hope this can help others
The answer from Asaf is working perfectly for me.
Angular 14
matTooltip="Component: Test
Last updated date: 2023-01-17T09:17:02.753Z"
Mattooltip
I have fixed this in my project using
So, what you'll need to do is:
newItems = this.items.join("
");
Another thing, you need to change this:
matTooltip="{{ items}}"
To this:
[matTooltip]="items"
Related
I want to change the font size of whole app in one click. like in this article
Right now am trying to archive this by document.getElementsByTagName() and get element current font size and increase it. Unfortunately I cannot get the current font size. When I call document.getElementsByTagName('body').[index].style.fontSize, returns an empty string. Is there are any packages available to do this..? any suggestions?
you can use [ngClass] on your wrapper div. I have created a stack blitz for it
the idea is to change the class when you click on a button and define your classes with font sizes
getElementsByTagName() will retrieve an array of all element objects
with the specified tag name.
Now you have only one body tag and using this function to retrieve it is an overkill and not of much use. It's better to wrap your app with a tag having id like <div id="myAppView">....app....</div>
Then selecting the id and applying the modification.
I've created a Stackblitz: https://stackblitz.com/edit/angular-k2szyy which has a slight modification of your code using .getElementById()
TS:
import { Component } from '#angular/core';
#Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
name = 'Angular';
change() {
document.getElementById('myAppView').style.fontSize = '50%';
}
}
HTML:
<div id="myAppView">
<hello name="{{ name }}"></hello>
<p>
Start editing to see some magic happen :)
</p>
<button
(click) = "change()"
>Update</button>
</div>
I need to access the generated css classname from within an angular component, in order to style a 3rd-party component.
Angular does some magic transformations on the local css classnames to enable scoping. I need to apply some custom styles to an ngx-datatable component. To do this, I need to pass it custom classnames. Because of what angular does to the classnames, these no longer match.
Adding the classnames to the global scope or using ::ng-deep both work, however I would rather not break the encapsulation.
dashboard-component.ts
#Component({
selector: 'app-dashboard',
templateUrl: './dashboard.component.html',
styleUrls: ['./dashboard.component.scss']
})
export class DashboardComponent {
getRowClass(row){
return 'my-class';
}
}
dashboard-component.scss
.my-class {
background: green;
}
dashboard-component.html
<ngx-datatable
[rowclass]="getRowClass"
></ngx-datatable>
The way I see it I should be able to access some reference to the css class from within the component, say this._styles, which will then carry the generated name of the class at runtime, so I can do
getRowClass(row){
return this._styles['my-class'];
}
I think you are not able to propagate your styles to ngx-datatable.
You can use encapsulation: ViewEncapsulation.None within your #component but make sure you use it carefully as it will lead to some weird css behaviours.
Next, What you can do is create a container for your dashboard.html file like:
<div class="dashboard-container">
<ngx-datatable></ngx-datatable>
</div>
and inside your dashboard.scss you can reference the parent container
.dashboard-container {
.my-style{}
}
Just put the css classes in the global style file ,otherwise you will need to use ::ng-deep,so my advice to put ngx-datatable in the global style file
check the ngx-datatable demo asset/app.css where the did the same
another option you can set the encapsulation: ViewEncapsulation.None on the component the the class name will be the same
#Component({
selector: "app-demo",
templateUrl: "./demo.component.html",
styleUrls: ["./demo.component.scss"],
encapsulation:ViewEncapsulation.None
})
export class DemoComponent implements OnInit {
demo.component.scss
ngx-datatable {
.green-color {
background:green;
& div {
color :#fff;
}
}
}
set the encapsulation to none or put the style in global style file are the same here because both ways will be the style globally without any change
demo 🔥
For a given js variable, which has style information in it:
menuBgColor = "red";
In AngularJS I was able to use dynamically embedded style:
<div>
<style>
.menuElement{
background-color:{{menuBgColor}}
}
</style>
<div class="menuElement">...</div>
</div>
In Angular2+ I cannot use the same as above. When the view is rendered in the browser variable menuBgColor is not populated and the element is rendered as coded.
like this -
<body>
...other markup...
<div><style>.menuElement{background-color:{{menuBgColor}}}</style>
...markup...
</body>
I want to know that what are the other ways in angular 2+ to add dynamic styles to the view?
I know of ngStyle but the given example is a very small one.
In my case, I have to apply dynamic styles to each element of the whole app like button, borders, background, colors, tree controls,
sidebars etc. So ngStyle is very exhaustive.
I also do not have predefined theme files because theme is managed by a feature in our app where user can define his/her own theme. Here
I understand that I can refresh page to get the updated theme BUT
consider that there can be 'n' number of users with their own themes.
So in my use case, the only solution I can think of is that somehow variable interpolate and create an embedded css.
Any help is greatly appreciated.
You can try this:
<div [style.background-color]="yourVar"></div>
In this case the binding should work
There's no pretty way to do this without building a huge structure like Angular Material does. But, if your theme system is not so complex, I'd simply go with a dynamically rendering of the <link> tag to your theme like so:
import { Component } from '#angular/core'
import { DomSanitizer } from '#angular/platform-browser'
#Component({
selector: 'my-app',
template: `
<link rel="stylesheet" [href]="getThemeUrl()">
<div class="main">
{{'themes/css/'+ theme +'.css' }}
<select [(ngModel)]="theme" (change)="onThemeChanged(theme)">
<option value="red">Red</option>
<option value="blue">Blue</option>
<option value="yellow">Yellow</option>
</select>
</div>
`
})
export class AppComponent {
theme = 'red';
constructor(public sanitizer: DomSanitizer){}
getThemeUrl(){
return this.sanitizer
.bypassSecurityTrustResourceUrl('themes/' + this.theme + '.css');
}
}
Plunkr
I couldn't find a way to use ngStyle on the index.html in the body tag using angular 2.
like on index.html:
<body ngStyle="bodyStyle">
Demo text
</body>
The only way I found is using "encapsulation: ViewEncapsulation.None" in the component, however, only works using standard css class but not using a variable or function as ngStyle,
Like, on the component styles:
body {
background: red;
}
I also found something similar on angularjs as the link below.
http://plnkr.co/edit/7cwAeGMsCYA8HIrWbl7d?p=preview
Is possible to have the same result in angular 2 as the link above ?
There is no way to do that. ngStyle only works in the template of an Angular component. <body> can't be inside a components template.
You can use https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style instead.
Another way would be to use 'body' as selector of your AppComponent and apply styles using #HostBinding()
#Component({
selector: 'body',
...
})
export class AppComponent {
#HostBinding('style.background-color')
backgroundColor:string = 'red';
}
How can I use Angular 2 styles in #Component with multiple classes on the same tag?
#Component({
styles: `.class1 .class2{background-color:red;}`
})
This generates the following css code:
.class1[<RANDOM_ANGULAR_ATTR>] .class2[<RANDOM_ANGULAR_ATTR>]{
background-color: red;
}
This will not select a tag defined like this:
<div class=".class1 .class2" RANDOM_ANGULAR_ATTR></div>
Is there any way to make this approach work?
Your styles should have the classes without a space between them. Multiple classes in the same selector must be written directly after each another – with no white space. For example:
.class1.class2 { background-color:red; }
And in order to select your object you should have the classes added like this:
<div class="class1 class2">Test css</div>
See the code below:
import { Component } from '#angular/core';
#Component({
selector: 'my-app',
styles: [
`
.class1.class2{background-color:red};
` ],
template: `
<h1>My First Angular 2 App</h1>
<div class="class1 class2">Test css</div>
`
})
export class AppComponent { }
For more options see also the following blog posts (about Shadow DOM, Encapsulation Types .. any other cool things):
https://scotch.io/tutorials/all-the-ways-to-add-css-to-angular-2-components
http://blog.thoughtram.io/angular/2015/06/29/shadow-dom-strategies-in-angular2.html
Have you looked at Justin Schwartzenberger's NG-Conf talk on CSS styles and the randomly generated tag? https://www.youtube.com/watch?list=PLOETEcp3DkCq788xapkP_OU-78jhTf68j&v=J5Bvy4KhIs0
potential options are to:
Use a styleUrls template
change encapsulation
use a different class (since its only relevant to this component its ok to name something simple vs using 2)