I am trying to add custom class to ngbTooltip which is working fine on ng-bootstrap official documentation
ngBootstrap Link
I am trying to replicate the same in my code:
tooltip-test.component.html
<div class="row mt-5 ml-5">
<div class="col">
<button type="button" class="btn btn-primary" ngbTooltip="Tool tip on top" placement="top"
tooltipClass="my-custom-class">Tooltip</button>
</div>
</div>
tooltip-test.component.ts
import { Component, OnInit, ViewEncapsulation } from '#angular/core';
import { NgbTooltipConfig } from '#ng-bootstrap/ng-bootstrap';
#Component({
selector: 'app-tooltip-test',
templateUrl: './tooltip-test.component.html',
styleUrls: ['./tooltip-test.component.css'],
providers: [NgbTooltipConfig],
// encapsulation: ViewEncapsulation.None
})
export class TooltipTestComponent implements OnInit {
constructor(tooltipConfig: NgbTooltipConfig) {
tooltipConfig.openDelay = 500;
tooltipConfig.tooltipClass = 'my-custom-class'
}
ngOnInit() {
}
}
tooltip-test.component.css
.my-custom-class .tooltip-inner {
background-color: darkgreen;
font-size: 125%;
}
.my-custom-class .arrow::before {
border-top-color: darkgreen;
}
But I want to achieve same without using encapsulation: ViewEncapsulation.None or ::ng-deep or :host in my code.
tooltipConfig.openDelay = 500; is working fine but
tooltipConfig.tooltipClass = 'my-custom-class' is not loading class.
I even tried tooltipClass="my-custom-class" in HTML.
Can anyone tell me where I am going wrong?
Stackblitz Link where code is not working
All you need is to understand what is view encapsulation in Angular. Here is a good article: https://blog.thoughtram.io/angular/2015/06/29/shadow-dom-strategies-in-angular2.html
Related
I want to change my button colour on click using angular and css as I am very new to it.
.ts
import { Component } from '#angular/core';
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
title = 'title';
}
.html
<mat-sidenav color="primary" #sidenav fxLayout="column" mode="over" opened="false" fxHide.gt-sm="true">
<div fxLayout="column">
<button mat-button style="text-align:left" routerLink="butn1" >Attend</button>
<button mat-button style="text-align:left" routerLink="butn2" >Host</button>
<button mat-button style="text-align:left" routerLink="contact" >Contact</button>
<button mat-button style="text-align:left" routerLink="login" >Login</button>
</div>
</mat-sidenav>
You can add this in the html button tag
‘<button [class.mycolorclass]=’hasClicked’ (click)=’hasClicked=true’
The logic in the click directive can be moved into a method in the typescript class if you prefer that
I'm not familiar with angular, but CSS :active should manage to do this:
button {
line-height: 30px;
height: 30px;
font-size: 15px;
color: red;
border: 1px solid black;
background-color: #eee;
color: black;
}
button:active {
color: red;
border-color: red;
}
<button>Click me!</button>
on button click set variable true/false as per your requirement
buttonClicked=false;
onButtonClick(){
this.buttonClicked=true;
}
and give condition in HTML like this
<button mat-button
[ngClass]="buttonClicked? 'myClassHighlighted' : 'none'"
style="text-align:left" routerLink="attend" >Attend</button>
and in css add classes like
.myClassHighlighted{
//your styles here
}
.none{
//your styles here
}
Use ngClass in your buttons to give 'em conditional classes based on a flag which is set true only when you click on that button so I guess you will need ngClick as well, well I don't know about the version of Angular that you are using right now cuz you didn't mention that but now you know you will need ngClass and ngClick for sure and your code might look like sth like this:
<button mat-button style="text-align:left" [ngClass]="{'button--clicked': clicked}" routerLink="attend" (click)="clicked=!clicked" >Attend</button>
.ts
import { Component } from '#angular/core';
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
title = 'title';
buttons = [
{ title: 'Attend', link: 'butn1', active: false },
{ title: 'Host', link: 'butn2', active: false },
{ title: 'Contact', link: 'contact', active: false },
{ title: 'Login', link: 'login', active: false },
]
toggleColor(button) {
button.active = !button.active;
}
}
.html
<mat-sidenav color="primary" #sidenav fxLayout="column" mode="over" opened="false" fxHide.gt-sm="true">
<div fxLayout="column">
<button
mat-button
*ngFor="let button of buttons"
[color]="button.active ? 'accent' : 'primary'"
style="text-align:left"
[routerLink]="button.link"
(click)="toggleColor(button)">
{{ button.title }}
</button>
</div>
Need to add css class for button based on click css value change
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 {
[...]
}
I have project in angular, i add bottom sheet from angular material and it work.
i try to make the opened popup be sticky to botton and responsive to him But its not work.
my main components:
import { Component, OnInit } from '#angular/core';
import { MatBottomSheet } from '#angular/material/bottom-sheet';
import { PopupsDialogComponent } from '../../../modules/home/components/popups-dialog/popups-dialog.component';
#Component({
selector: 'app-header',
templateUrl: './header.component.html',
styleUrls: ['./header.component.sass']
})
export class HeaderComponent implements OnInit {
constructor(private _bottomSheet: MatBottomSheet) { }
ngOnInit() {
}
openBottomSheet(): void {
this._bottomSheet.open(PopupsDialogComponent, {
panelClass: 'custom-popup'
});
}
}
main components html:
This the button that i want the dialog be stiky to him
<header>
<div class="container">
<button mat-fab class="mat-success" (click)=openBottomSheet()>+</button>
</div>
</header>
PopupsDialogComponents:
import { Component } from '#angular/core';
import {MatBottomSheetRef} from '#angular/material/bottom-sheet';
#Component({
selector: 'app-popups-dialog',
templateUrl: './popups-dialog.component.html',
styleUrls: ['./popups-dialog.component.sass']
})
export class PopupsDialogComponent {
constructor(private _bottomSheetRef: MatBottomSheetRef<PopupsDialogComponent>) {}
openLink(event: MouseEvent): void {
this._bottomSheetRef.dismiss();
event.preventDefault();
}
}
style.css:
.custom-popup
position: absolute
top: 95px
right: 26%
min-width: 0% !important
thanks a lot
Some of built-in angular components are rendered lately,
I think you can handle that in CSS like:
:host ::ng-deep .custom-popup {
position: absolute
top: 95px
right: 26%
min-width: 0% !important
}
I added a PrimeNG confirmation dialog (followed the example from the official doc):
component.html
<p-confirmDialog appendTo="body" #cd>
<p-footer>
<button type="button" pButton class="btn btn-primary btn-normal mr-4" label="Print or save" (click)="cd.accept()"></button>
<button type="button" pButton class="btn btn-default btn-normal ml-2" label="Skip" (click)="cd.reject()"></button>
</p-footer>
</p-confirmDialog>
component.ts:
import { ConfirmationService } from 'primeng/api';
#Component({
selector: 'xxx',
templateUrl: './xxx.component.html',
styleUrls: ['./xxx.component.scss'],
providers: [ConfirmationService]
})
constructor(private _confirmationService: ConfirmationService) { }
// I am trying to simplify the code
// this method is called successfully
this._confirmationService.confirm({
message: 'Please print or save the confirmation details before continuing.',
header: 'Confirmation details',
accept: () => {
this.navigatetoPaymentApp();
}
});
angular.json:
"styles": [
"node_modules/primeng/resources/primeng.min.css",
"src/styles/main.scss"
],
app.module.ts:
import {BrowserModule} from '#angular/platform-browser';
import {BrowserAnimationsModule} from '#angular/platform-browser/animations';
#NgModule({
imports: [
BrowserModule,
BrowserAnimationsModule,
//...
],
//...
})
export class AppModule { }
And I got this:
The expected result is like this:
Issues:
1. missing out-of-box styling from primeng (e.g. darken background)
2. missing close window cross icon
Is there anything missing?
Ideas?
Thanks in advance!
Eventually I found the issue. It's because the CSS styles are coming from the prime theme. e.g. add "node_modules/primeng/resources/themes/nova-light/theme.css" to angular.json for the styles list.
So I implemented the following classes with specific properties:
.ui-confirmdialog.ui-dialog {
width: 34em;
background-color: white;
& .ui-dialog-titlebar {
padding: .5em 0.667em;
font-family: xxx;
font-size: 1.3125rem;
font-weight: bold;
color: orange;
}
& .ui-dialog-content {
padding: 1em;
}
}
Additionally, I need to add this to darken the background (I drew some wisdom from the theme.css files from primeNG:
body .ui-widget-overlay {
background-color: #424242;
opacity: 0.7;
filter: alpha(opacity=70);
}
Note: the class ui-widget-overlay is pretty much empty if theme is not applied.
Following is my working code, which is not giving any error in console and printing the array items and test heading as expected. BUT somehow dynamic background styling in not working, Let me know what I am doing wrong here.
import { Component } from '#angular/core';
#Component({
selector: 'my-app',
template: `
<h1>{{name}}</h1>
<div class="one" *ngFor="let item of colArr" style="background: {{item}};">{{item}}</div>
`,
styles: [`
.one {
width: 100%;
text-align: center;
padding: 10px;
margin: 5px;
}
`]
})
export class HomeComponent {
public name = 'test';
public colArr = ['#111111', '#222222', '#333333', '#444444', '#555555', '#666666', '#777777', '#888888', '#999999'];
}
Following is the output I am getting -
Direct binding to style is discouraged (doesn't work well on all browsers). Use instead
<div class="one" *ngFor="let item of colArr" [ngStyle]="{background: item}">{{item}}</div>
or
<div class="one" *ngFor="let item of colArr" [style.background]="item">{{item}}</div>