I'm trying to change a tab-button element colour via CSS, Upon inspection I noticed that it has class tab-button, and so in CSS I'm doing:
.tab-button {
color: lightcoral;
}
but nothing seems to be changing.
I'm probably barking up completely the wrong tree as my CSS experience is exactly nil, but I'm at a loss
Edit:
app_component.html
<!DOCTYPE html>
<html>
<link href="app_component.css" rel="stylesheet">
<body>
<h1 id="introHeading">
Hello Angular!
</h1>
<material-tab-panel id="tabPanel">
<material-tab label="One" id="tabOne">
Tab One
</material-tab>
<material-tab label="Two">
Tab Two
</material-tab>
</material-tab-panel>
<material-checkbox class="checkboxClass" themeColor="#F08080" id="testCheckbox" label="Test" (handleClick)="checkChecked()"></material-checkbox>
<material-button label="Click me!" id="buttonToClick"></material-button>
</body>
app_component.dart
import 'package:angular2/angular2.dart';
import 'package:angular_components/angular_components.dart';
#Component(
selector: 'my-app',
styleUrls: const ['app_component.css'],
templateUrl: 'app_component.html',
directives: const [materialDirectives, MaterialCheckboxComponent],
providers: const [materialProviders],
)
class AppComponent implements OnInit {
#override
ngOnInit() {
}
}
I am unable to see where you are including the tab-button class to the HTML page. Is there another html page which corresponds to the class you are referring to? In order to have the class take effect you need to include class="tab-button" within the opening tag.
If you notice that this is still not working, there may be another class overriding the color which you are trying to use. You can add the important tag to make your color take precedence.
.tab-button {
color: lightcoral !important;
}
Related
I have a string, in a variable "prod.de.description", that is a description of an object, like that:
"<p><strong>Test</strong></p><p><strong><span style="background-color: #ed7e32;">Test2</span></strong></p>"
When I use innerhtml, it's show only the strong but not the background color. Here is the html code and the result:
<div class="col-10" style="padding-left:0; font-size:0.9rem">
<div class="row">
<div class="col-3 text-right">
<label class="modal-tag">DESCRIPTION</label>
</div>
<div class="col-9">
<p [innerHTML]="prod.de.description"></p>
</div>
</div>
That's what I get since now:
Why I don't get the background color under Test2 but only the strong?
I'm newbie of HTML. Thanks a lot!
You are using same quotation marks (") inside and outside of string.
That might cause the problem. Use different ones. Maybe something like this:
"<p><strong>Test</strong></p><p><strong><span style='background-color: #ed7e32;'>Test2</span></strong></p>"
you are using innerHTML directive of framework and it sanitises the content before putting into your dom. It will remove styles tag and script things as security issue. Outsiders can attack with their on content. To prevent that, framework does this thing.
However, framework also gives way to escape this when you know that you are putting content from trusted sources.
Follow this link:
https://stackblitz.com/edit/angular-8-app-example-mzdwkd
import { Component } from '#angular/core';
import { DomSanitizer } from '#angular/platform-browser';
#Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ],
})
export class AppComponent {
description = '<p><strong>Test</strong></p><p><span style="background-color: #ed7e32;">Test2</span></p>';
constructor(private sanitizer: DomSanitizer){}
transformYourHtml(htmlTextWithStyle) {
return this.sanitizer.bypassSecurityTrustHtml(htmlTextWithStyle);
}
}
HTML:
<p [innerHTML]="transformYourHtml(description)"></p>
The issue I am currently facing is that the link generated by the a tag links to the base page. As you can see in the image it links to
localhost:3000#hello
My goal is to get it to link to
localhost:3000/bodyText#hello
The a tag will come from an external source so my test example mimics that. I have so far been using innerHTML directive to put the external html in the html template.
Here is the component I am working with
import { Component, OnInit } from '#angular/core';
#Component({
selector: 'app-test',
template: '<div [innerHTML]=html></div>',
styleUrls: ['./test.component.css']
})
export class TestComponent implements OnInit {
constructor() {
}
html = "A tag <a name=\"hello\" id= \"hello\"/> "
ngOnInit() {
}
}
I solved this by adding a click handler to the html tag and then using scrollIntoView and getElementById instead of using an a tag.
I am trying to achieve day/night feature with a click of a toggle on my web app.
I know how to add it to a single component with my nav menu lets say,
but I need to add it to multiple components.
One of the solutions I found is to use ng-deep but it feels a bit wrong to do it that way in the main CSS.
Another solution I have figured out is to create a service and subscribe to the toggle in each of the components, but again that feels like an overkill.
My questions is: Can I change a style of multiple components with one toggle?
Would prefer not to use JS.
Currently, my app.component looks like this
import { Component, ElementRef } from '#angular/core';
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.less']
})
export class AppComponent {
title = 'Optimus Engine';
version = 'Latest';
day = true;
constructor(private element: ElementRef) {
}
dayNight() {
if (!this.day) {
this.element.nativeElement.classList.add('night');
}
if (this.day) {
this.element.nativeElement.classList.remove('night');
}
this.day = !this.day;
//BTW for some reason it does not remove the class but that's a different problem.
}
}
And then on my template:
<div class="toggle-box" (click)="dayNight()">
<input type="checkbox" name="checkbox1" id="toggle-box-checkbox" />
<label for="toggle-box-checkbox" class="toggle-box-label-left"></label>
<label for="toggle-box-checkbox" class="toggle-box-label"></label>
</div>
And then in less:
:host.night h1 {
transition: all 1s;
color: aliceblue;
}
But this works only for h1 and I'm wondering how to got other components to change with that toggle.
You can use a service to propagate a value accross multiple components.
For instance, a service like this:
export class ThemeService {
private modeSubject: BehaviorSubject<'day'|'night'> = new BehaviorSubject<'day'|'night'>('day');
public get mode():Observable<'day'|'night'>{
return this.modeSubject.asObservable();
}
public switchMode(newMode:'day'|'night'):void{
this.modeSubject.next(newMode);
}
}
And then, in your component, simply subscribe to the mode observable:
...
...
constructor(themeService: ThemeService){
themeService.mode.subscribe(mode => this.theme = mode);
}
...
...
finally, use [ngClass] to bind the theme to your template:
Any component implementing this logic will switch with your theme mode (day or night).
Keep in mind that I used two strings here but you can use an enum for sure, these were just for the example.
Using Angular5 - I know how it is possible to bind an HTML element's style to a Boolean value, but I can't find an explanation to do this for multiple styles at the same time.
ie. I have found something like this works fine:
[style.background]="r.favourite === true ? '#3f51b5' : 'white'"
However I am also wanting to change the color of my text to white at this point also... And I don't want to clutter my components with lots of [style.xxx] tags.
Is there a way I can dynamically bind to a CSS class to apply when r.favourite === true?
I have seen ways in which this can be done... However this assumes you are binding within the same file as such:
import { Component } from '#angular/core';
#Component({
selector: 'my-app',
template: `
<button class="my-btn" [class.extraclass]="someProperty">Call to Action</button>
`,
styles: [`
.my-btn { font-size:1.7em; }
.extraclass { background: black; color: white; }
`]
})
export class AppComponent {
someProperty = true;
}
However my CSS is being stored in a shared file - such that I have a file structure like:
import { Component } from '#angular/core';
#Component({
selector: 'my-component',
styleUrls: ['./css/shared-styles.css']
template: `
<button class="my-btn" [class.extraclass]="someProperty">Call to Action</button>
`
})
export class MyComponent {
someProperty = true;
}
You can use NgClass.
<div [ngClass]="{'text-success':r.favourite ,'text-danger':!r.favourite}">
Where 'text-success' and 'text-danger' are classes you define.
Please refer to this great article about NgClass and NgStyle:
https://codecraft.tv/courses/angular/built-in-directives/ngstyle-and-ngclass/
Hope this helps
I started using angular 5 and I have a problem with binding css between the tag style from a variable in the component.ts.
So this is my code in component.ts:
export class AppComponent {
style = '.p-color{color: red;}';
}
and this is my html code:
<style>{{style}}</style>
Anyone have any ideas how to solve it?
One question in advance: Why do you want to do that? I don't think that's the best approach for achieving your goal.
There are several other methods in Angular 4 to apply styles:
Class-selector
<p [class.color-red]="your-expression">Your text</p>
Host Binding
export class SongTrack {
//<host class="selected"></host>
#HostBinding('class.selected') selected = true;
//<host style="color: red;"></host>
#HostBinding('style.color') color = 'red';
}
Source: https://medium.com/google-developer-experts/angular-advanced-styling-guide-v4-f0765616e635
Set styles directly
<h1 [style.color]="titleStyle ? 'green' : 'pink'">
{{title}}
</h1>
Hope that helps :)
create file html and css include appcomponent
#Component({
selector:'all-page',
templateUrl:'./code.templet.html',
styleUrls: ['./color.component.css']
})
export class AppComponent
I needed to do the same thing and it worked for me
At your TS file:
import {ElementRef,Renderer2} from '#angular/core';
#Component({
...
})
export class Foo{
#ViewChild('css') element:ElementRef;
ngOnInit(){
element.nativeElement.innerHTML = '<style type="text/css"> Your css goes here </style>';
}
}
At your template:
<div #css>//style will be bind here</div>