I need to dynamically change a p-card component in my APP. But it's simply not working...
Heres what I've tried so far :
<div class="card-image-comp">
<p-card [class.activeCard]="profileCardSelected === 1" (click)="selectProfileType(1)">
<img src="../../../assets/icons/person.png">
</p-card>
<p>Paciente</p>
</div>
<div>
<p-card [class.activeCard]="profileCardSelected === 2" (click)="selectProfileType(2)">
<img src="../../../assets/icons/estetoscopio.png">
</p-card>
<p>Profissional de Saúde</p>
</div>
...
My function:
selectProfileType(numCard: number){
this.profileCardSelected = numCard;
}
This part is working just fine, the issue is that the component is not obeying it's new class.
I've tried the normal stuff:
.activeCard {
background-color: black;
}
...
div {
.activeCard {
background-color: black;
}
}
...
.personalCardComp {
.activeCard {
background-color: black;
}
}
... and even some nasty stuff
:host {
::ng-deep .activeCard {
background-color: black;
}
}
...
:host {
::ng-deep p-card.p-element.activeCard {
background-color: black;
}
}
As I said before, the class is applied correctly, but the card only changes when I apply the css to the div children of the p-card...
Basically if I could apply the class to this div children It would work just fine... Is there a way to do so? Apply the class to p-card but the div children obbey...
Be sure to properly import your .scss file and then:
:host ::ng-deep {
.p-card.p-component {
background: black;
}
}
Related
I have written the code for getting the URL param value
export class RedirectingComponent implements OnInit {
constructor(private activatedRoute: ActivatedRoute) { }
ngOnInit()
{
this.activatedRoute.paramMap.subscribe(params=>
{
let color=params.get('color');
console.log(color);
if(color)
{
if(color=='red')
{
//So If the color is red then we should apply red.css
}
}
})
}
}
Here are the css files
red.css
.my-container{
height: 100%;
background-color: red;
}
blue.css
.my-container{
height: 100%;
background-color: red;
}
Here is the Main Page
<mat-toolbar color="primary">
<span class="mainheading">Theme Changing</span>
</mat-toolbar>
<div class="my-container">
<h1 class="sideheading">URL that entered are processed for Theme Changing of the Page</h1>
</div>
Now I have to use the param value like color and change the background to the color mentioned like if the color mentioned is red the background should change in to red.
Note:Their should be different CSS files
You can't control header tags by angular directives.
You can create style tags and import different files in them. then control them by *ngIf directive.
<style type="text/css" *ngIf="rule1">
#import 'path\to\file-1';
</style>
<style type="text/css" *ngIf="rule2">
#import 'path\to\file-2';
</style>
Guys I have found a solution for this question
import { ActivatedRoute } from '#angular/router';
constructor(private activatedRoute: ActivatedRoute) { }
ngOnInit()
{
this.activatedRoute.paramMap.subscribe(params=>
{
let color=params.get('color');
console.log(color);
if(color)
{
if(color=="red")
{
loadCss("assets/styles/red.css");
console.log("This should be able to change to red color background");
}
else if(color=='blue')
{
loadCss("assets/styles/blue.css");
console.log("This should be able to change to Blue color background");
}
else if(color=='green')
{
loadCss("assets/styles/green.css");
console.log("This should be able to change to Green color background");
}
}
function loadCss(filename:any)
{
var fileref=document.createElement("link");
fileref.setAttribute("rel","stylesheet");
fileref.setAttribute("type","text/css");
fileref.setAttribute("href",filename);
if(typeof fileref!="undefined")
{
document.getElementsByTagName("head")[0].appendChild(fileref)
}
}
})
}
}
Main CSS Files
.mainheading
{
width: 100%;
text-align: center;
}
.sideheading{
padding-top: 20px;
color: white;
font-style:italic;
text-align:center ;
}
red.css
.my-container{
height: 100%;
background-color: red;
}
blue.css
.my-container{
height: 100%;
background-color: blue;
}
green.css
.my-container{
height: 100%;
background-color: green;
}
<mat-toolbar color="primary">
<span class="mainheading">Theme Changing</span>
</mat-toolbar>
<div id="theme" class="my-container" >
<h1 class="sideheading">
URL that entered are processed for Theme Changing of the Page
</h1>
</div>
Note:
Put the css files in assets/styles folder.
For getting the value from the url you should add the script in the app routing module
const routes: Routes = [
{
path:'redirecting/:color',component:RedirectingComponent
}];
I have HTML table in Angular web app.
Get the data from the database via service and display it as text.
One of the columns is Status, so I need to present that variable not as text,
but as a circle of certain color, so if that cell value is "green",
it should show as green circle.
Here is what I have.
CSS (part of Component Styles):
:host ::ng-deep td.circle {
text-align: center;
font-size: 0;
background-color: RED; <--- need to pass param here
}
I define that column as:
.circle {
border-radius: 50%;
height: 24px;
width: 24px;
}
HTML:
<app-table [attrs]="serviceapi" [monthSelected]="monthSelected" ></app-table>
TS for that table:
In constructor:
this.data = {
headers: [],
rows: []
};
ngOnInit() {
this.tableMetricsService.getTableMetrics(
JSON.parse(this.attrs).api,
this.monthSelected
).subscribe(response => {
this.data = response;
}
);
}
Any idea how to "translate" cell value into the CSS background-color ?
TIA,
Oleg.
You could put a data attribute on the html and write a corresponding selector:
[data-status="green"] {
background: green;
}
[data-status="red"] {
background: red;
}
<div data-status="green">Green</div>
<div data-status="red">Red</div>
But I don't see any advantage to this approach over using a regular css class:
.green {
background: green;
}
.red {
background: red;
}
<div class="green">Green</div>
<div class="red">Red</div>
Here is what worked for me:
<div *ngIf="cell.styleClass == 'circle'" [ngStyle]="{'background-color': cell.value}" [ngClass]="cell.styleClass">
</div>
I have a form:
<form class="my-form">
<input type="text" class="my-form__input">
My SASS is currently set up something like:
.my-form {
// Some styles
&__input {
//Some styles
}
&__button {
//Some styles
}
}
However, I want to target inputs that are text types and have my class, eg in CSS:
input[type=text].my-form__input
Is there a way to get the above CSS output whilst keeping my SASS structure above?
.my-form {
// Some styles
&__input {
//Some styles
&[type="text"] { // generates .my-form__input[type="text"]
border: 2px solid red;
}
}
&__button {
//Some styles
}
}
How do I change md-input-container placeholder color using css in Angular Material? As screenshot below I have phone no. and password textfield. Phone no. textfield has Phone No. and password has Password placeholder name.
in the last version of angular you can remove the placeholder in the input and add a mat-placeholder in the mat-form-field and custom the css with a class
html :
<mat-form-field>
<input matInput type="text">
<mat-placeholder class="placeholder">Search</mat-placeholder>
</mat-form-field>
css:
.mat-focused .placeholder {
color: #00D318;
}
Placeholder is depicted as a <label> in Angular Material. So you actually need to style the label not the placeholder.
As soon as you click (focus) on the input this <label> which is looking as a placeholder slides up and converted into a form <label>.
So you just need to apply this CSS:
/* When the input is not focused */
md-input-container label {
color: red;
}
/* When the input is focused */
md-input-container.md-input-focused label {
color: blue;
}
Have a look at this Plunkr Demo.
In Angular 4+
First you will need to turn ViewEncapsulation off to style Material Elements. Be warned this is subverting the Angular emulated-shadow DOM default and you should proceed with caution (https://blog.thoughtram.io/angular/2015/06/29/shadow-dom-strategies-in-angular2.html).
In dummy.component.ts:
#Component({
...,
encapsulation: ViewEncapsulation.None,
})
Then give your < mat-form-field > element a unique class in dummy.component.html:
<mat-form-field class="dummy-input-field" floatPlaceholder="always">
<input placeholder="Dummy"/>
</mat-form-field>
Finally in dummy.component.css apply the styling:
.dummy-input-field .mat-input-placeholder {
color: red;
}
Similarly, if you'd like to dynamically change color if the field is focused:
.dummy-input-field.mat-focused .mat-input-placeholder {
color: red;
}
.container {
.mat-form-field-outline,
.mat-form-field-empty.mat-form-field-label,
.mat-form-field-label,
.mat-form-field-underline,
.mat-input-element,
::placeholder {
color: $white !important;
}
}
The code above gives me the results below. I am overriding the form-field outline, label-empty, label, underline, input element, placeholder text.
I'm using Angular 8.2.2 and Angular Material 8.2.2
For the newer versions of material which have a mat prefix instead of md prefix, you can do this in 2 ways:
way 1: using view encapsulation set to none and then writing the styles in the components css file, like #user2245995 pointed out in the answer above.
Although this is the way angular suggests, please be advised that the styles you write here will propagate to all the child/parent components and effect other elements there.
way 2: We can use the shadow piercing descendant combinators i.e. /deep/ or ::ng-deep or >>> Below is an example
/deep/ label.mat-input-placeholder {
color: #fff; // choose the color you want
}
Although this method is specified in the angular docs as of now, they have mentioned that this method will soon be deprecated.
read more: https://angular.io/guide/component-styles#!#-deep-
I tried to be as deterministic as possible for the color of a mat input and I dare to share the result here, hoping it will help some others (the placeholder color customization need is handled, as asked in the question):
CSS custom properties used
Note: The colors are considered different when the focus is here or not, that is why we have 2 blocs in the following:
--clear-button-color: lightblue;
--asterisk-color: lightgreen;
--label-color: springgreen;
--underline-color: blue;
--input-color: lightgray;
--clear-button-focused-color: blue;
--asterisk-focused-color: green;
--label-focused-color: pink;
--underline-focused-color: yellow;
--input-focused-color: gray;
--placeholder-focused-color: magenta;
--caret-focused-color: blue;
SCSS styling
.mat-form-field {
&.mat-focused {
> .mat-form-field-wrapper {
> .mat-form-field-flex {
> .mat-form-field-infix {
> .mat-input-element {
color: var(--input-focused-color);
caret-color: var(--caret-focused-color);
&::placeholder {
color: var(--placeholder-focused-color);
}
}
> .mat-form-field-label-wrapper {
> .mat-form-field-label {
> mat-label {
color: var(--label-focused-color);
}
> .mat-placeholder-required {
color: var(--asterisk-focused-color);
}
}
}
}
> .mat-form-field-suffix {
> .mat-focus-indicator {
> .mat-button-wrapper {
> .mat-icon {
color: var(--clear-button-focused-color);
}
}
}
}
}
> .mat-form-field-underline {
> .mat-form-field-ripple {
background-color: var(--underline-focused-color);
}
background-color: var(--underline-focused-color);
}
}
}
> .mat-form-field-wrapper {
> .mat-form-field-flex {
> .mat-form-field-infix {
> .mat-input-element {
color: var(--input-color);
&::placeholder {
color: var(--placeholder-color);
}
}
> .mat-form-field-label-wrapper {
> .mat-form-field-label {
> mat-label {
color: var(--label-color);
}
> .mat-placeholder-required {
color: var(--asterisk-color);
}
}
}
}
> .mat-form-field-suffix {
> .mat-focus-indicator {
> .mat-button-wrapper {
> .mat-icon {
color: var(--clear-button-color);
}
}
}
}
}
> .mat-form-field-underline {
> .mat-form-field-ripple {
background-color: var(--underline-color);
}
background-color: var(--underline-color);
}
}
}
.mat-input-element::-webkit-input-placeholder {
color: red;
}
this is if you use a structure similar with this one:
<input
matInput
[placeholder]="placeholder"
/>
Is there any contraindications on stylizing Angular2 custom element directly and selecting them with CSS selector ?
Example :
// HTML
<My-Page>
<header></header>
<main></main>
<My-Footer class="sticky-footer"></My-Footer>
</My-Page>
// CSS
My-Page {
background-color: grey;
}
header {
...
}
.sticky-footer {
position: absolute;
}
Good or bad practice ?
While this is perfectly valid it breaks modularity. A component can style its own root-element:
my-page.component.css
:host{
background-color: grey;
}
header {
...
}
.sticky-footer {
position: absolute;
}
This will achieve the same thing and contains CSS that's vital to your MyPageComponent in the component.
You should use piercing CSS combinators >>>, /deep/ and ::shadow
styles: [
`
:host { background-color: grey; }
:host >>> header{
background:yellow;
}
:host >>> My-Footer{
position: absolute;
}
`
],
template:
`
<My-Page> //<----no need as this becomes your :host
<header></header>
<main></main>
<My-Footer class="sticky-footer"></My-Footer>
</My-Page> //<----no need
`