I'm using ngx-bootstrap datepicker which has daypicker, monthpicker and yearpicker as inner component. I want to apply css to a table which is present inside daypicker.
<custom-datepicker>
<datepicker> //ngx-bootstrap datepicker component
<daypicker>
<table>
//rows, want to apply some css to only this table
</table>
</daypicker>
<monthpicker>
<table>
//rows
</table>
</monthpicker>
<yearpicker>
<table>
//rows
</table>
</yearpicker>
</datepicker>
</customdatepicker>
CustomDatePickerComponent.ts
#Component({
selector: 'custom-datepicker',
templateUrl: 'custom-datepicker-component.html',
styleUrls: ['custom-datepicker-component.scss'],
})
export class CustomDatePickerComponent {
}
custom-datepicker-component.html
<datepicker></datepicker>
custom-datepicker-component.scss
//I want to apply this css to a table which is inside daypicker. As of now it's applying to all the tables
table {
border: 1px solid lightgrey;
}
You can add a css class to your table:
<datepicker> //ngx-bootstrap datepicker component
<daypicker>
<table class="new-class">
//rows, want to apply some css to only this table
</table>
</daypicker>
...
and then use the regular class selector:
.new-class {
// your styling
}
Alternatively add a class to your datepicker or daypicker like so:
<datepicker class="new-class">
...
And use descendant selector:
.new-class table {
// your styling
}
it's as simple as this, using component name it's self we can apply css
custom-datepicker-component.scss
daypicker {
table {
border: 1px solid red;
}
}
You can try this :
datepicker > daypicker > table {
border: 1px solid lightgrey;
}
Related
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;
}
}
I have a form that contains something like the following:
<div class="form-field">
<input-component [tabIndex]="tabData.tabEnable"></input-component>
</div>
<div class="form-field">
<input [tabIndex]="tabData.tabEnable" matInput cgiPrecision type="number"/>
</div>
In the css I have this:
input:focus {
border: $border-width solid $darkblue
}
but the border only shows on the input element and not the input-component component which has an input wrapped inside of it. How can I get the input:focus to work for the custom angular component as well?
Your custom component should listen for the focus event, then focus the input.
#Component({
selector: 'custom-input',
template: `<input #myInput type="text" [(ngModel)]="innerValue">`,
styles: [`
input {border: 5px solid green; }
input:focus { border: 5px solid blue; }
`]
})
export class CustomInputComponent implements ControlValueAccessor {
#ViewChild('myInput', {static: false}) inputCtrl;
//...functions to implement ControlValueAccessor
#HostListener('focus')
focusHandler() {
this.inputCtrl.nativeElement.focus();
}
}
Here's a stackblitz demonstrating.
scss files are limited to their angular component. If you want to use css globally, use the style.scss.
Another option is, integrate the scss into your child component with the style-urls array:
#Component({
selector: 'input-component',
templateUrl: '/input-component.html',
styleUrls: [
'./input-component.scss', // own scss file
'./../path-to-other-compontent.scss' // <--- here
]
})
export class InputComponent {
[...]
}
in an Angular application I have a component with <ng-content></ng-content>. I added the scss rules for content that will be put inside the ng-content, but they are ignored. I tried to solve using :host, but it doesn't work.
https://stackblitz.com/edit/angular-ewqhzj
Wrapper component:
<app-embed>
<p>Hello world!</p><h1 class="toBeColored">toBeColored</h1>
</app-embed>
Styles in embed component:
:host {
border: 5px solid red;
padding: 15px;
display: block;
.toBeColored {
color: pink;
}
}
The problem is that the pink color of 'toBeColored' string is not set
Try this
:host ::ng-deep{
border: 5px solid red;
padding: 15px;
display: block;
.toBeColored {
color: pink !important;
}
}
and remove encapsulation statement and try ti build
encapsulation: ViewEncapsulation.Native
Try adding encapsulation: ViewEncapsulation.Native to your embed component like
import { Component, OnInit, ViewEncapsulation } from '#angular/core';
#Component({
selector: 'app-embed',
templateUrl: './embed.component.html',
styleUrls: ['./embed.component.scss'],
encapsulation: ViewEncapsulation.Native
})
export class EmbedComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}
You can't achieve that with a clean way.
A workaround would be to create global css :
:host {
...;
::ng-deep .toBeColored {
color: pink;
}
}
But it will be deprecated. See this issue
::ng-deep is going to hold the web record for long-lived deprecated API.
You should be able to apply the styles in the parent component that projects the content into the ng-content tag. The angular styles isolation appears to consider the content to be part of the component where the HTML is declared.
https://stackblitz.com/edit/angular-ivy-q9dn68
I have tried to change the background color for a
kendo-splitter-pane. However even if I add a style tag to it, it does not seem to apply to its inner elements.
What is then the appropriate way to customize the color for a kendo-splitter-pane?
You need to apply the background-color on the kendo-splitter-pane element, like this:
#Component({
selector: 'my-app',
template: `
<kendo-splitter style="height: 200px;">
<kendo-splitter-pane class="pane1">
<h3>Left pane</h3>
</kendo-splitter-pane>
<kendo-splitter-pane>
<h3>Center pane</h3>
</kendo-splitter-pane>
<kendo-splitter-pane [resizable]="false">
<h3>Right pane</h3>
</kendo-splitter-pane>
</kendo-splitter>
`,
styles: [ `
h3 {
font-size: 1.2em;
padding: 10px;
}
.pane1 {
background-color: red;
}
` ]
})
class AppComponent {}
My angular 2 components are taking full width of the page.
When I limit the component width, its margin is stretched to full width.
So I cannot bring other components beside this. How can I limit the width of components?
I tried display: inline, but no use.Still the component takes full width allowing nothing to come beside this.
import { Component } from '#angular/core';
import { Item } from './../item';
import { ItemComponent } from './ItemComponent';
#Component({
selector: 'Item-Set',
directives: [ItemComponent],
template: '<div class="singleItem" *ngFor="let eachItem of itemList"><Item></Item></div>'
})
export class ItemSet{
itemList: Item[];
constructor(){
this.itemList=ItemList;
}
}
In style sheet
.singleItem{
width:300px;
}
You need to add the CSS to set the width at the correct place. In your example would that be the styles parameter of ItemSet or Item like
Plunker example
Either on the ItemComponent with the :host selector (self):
#Component({
selector: 'Item',
template: '<div>Item</div>',
styles: [':host {display: block; border: solid 1px red; width: 300px;}']
})
export class ItemComponent{}
or the parent component with .singleItem as selector
#Component({
selector: 'Item-Set',
directives: [ItemComponent],
styles: [`
.singleItem{width:300px;}
:host {display: block; border: solid 1px green;}`
]
template: '<div class="singleItem" *ngFor="let eachItem of itemList"><Item></Item></div>'
})
export class ItemSet{
itemList = ['a', 'b', 'c', 'd'];
})