How can I add custom button in in picklist header, like, in here?
I'm trying to add button in Primeng picklist header, but it only takes string as a header value.
Is there a way to add any template (HTML) in automatically generated header?
<p-pickList
sourceHeader="Available" targetHeader="Selected>
</p-pickList>
you can extend p-pickList and add the button in your extending template
import { Component, ElementRef, Input, ViewEncapsulation } from '#angular/core';
import { PickList, DomHandler } from 'primeng/primeng';
import { ObjectUtils } from 'primeng/components/utils/objectutils';
#Component({
selector: 'ex-pick-list',
templateUrl: 'pick-list.component.html',
styleUrls: ['pick-list.component.scss'],
encapsulation: ViewEncapsulation.None
})
export class PickListComponent extends PickList {
constructor(el: ElementRef, domHandler: DomHandler, objectUtils: ObjectUtils) {
super(el, domHandler, objectUtils);
}
}
<div class="pick-list-container">
<!-- put the original html from the primeng pick list component "moveRight()" now you can use moveRight from PickList -->
<div class="custom-buttons">
<button pButton type="button" (click)="moveRight()" class="ui-[label]="''"></button>
</div>
</div>
</div>
Related
I want to allow users to customize colors and some styles in Angular application. For that I want to make something like this
Structure:
component-one
folder-with-css-files
style-for-component-1-for-client1.css
style-for-component-1-for-client2.css
style-for-component-1-for-client3.css
style-for-component-1-for-client4.css
#Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.style-for-component-1-for-client{clientId}.css'],
})
export class AppComponent implements OnInit {
clientId: string;
ngOnInit(): void {
// pseudocode
clientId = service.fetchClientId() // for example
}
}
How I can achieve that? I want to have some css files for every component and depend on user id I want to assign them to styleUrls. Someone can tell me how to do it?
You can use scss and wrap every stylesheet in a different class then based on the user’s selection change the class of your body.
Something like:
DarkMode.scss
.darkMode{
your first css here…
}
LightMode.scss
.lightMode{
your second css here…
}
index.html:
<body class="lightMode"></body>
Doing the above will by default apply the lightMode styling and if you remove the classes of your body in any of your components and replace it with darkMode then the darkMode styling will apply.
Adding/Removing class to/from body:
constructor(private renderer: Renderer2) {}
addClass(){
this.renderer.addClass(document.body, 'className');
}
removeClass(){
this.renderer.removeClass(document.body, 'className');
}
Adding/Removing the class does not have to be only in the index.html file, all you need to do is have a tag with a certain class that wraps around your whole code. For example in one of your components:
component.html:
<div [class]="className">
the rest of your html here...
</div>
component.scss:
.greenDefault{
green default css here...
}
.redDefault{
red default css here...
}
.greyDefault{
grey default css here...
}
component.ts
className: string;
changeStyle(class: string){
this.className = class;
}
I selected the scss option on a new Ionic Angular app. It's html container holds three tab pages. The scss stylesheet in the container component controls the styles for all pages. The global.sccs only contains imports, no styling and doesn't import the container's scss.. The container component implements OnInit.The stylesheets in the 3 tab page components are created empty.
I cannot change the style of any of the 3 tab pages by adding styles to their stylesheets. It continues to use the container's stylesheet. The selector for the style is in the container's html:
explore-container.component.html
<div id="container">
<strong>{{ name }}</strong>
...
</div>
The explore-container.component.ts file:
import { Component, OnInit, Input } from '#angular/core';
#Component({
selector: 'app-explore-container',
templateUrl: './explore-container.component.html',
styleUrls: ['./explore-container.component.scss'],
})
export class ExploreContainerComponent implements OnInit {
#Input() name: string;
constructor() { }
ngOnInit() {}
}
The tab page html uses the selector for the container component:
tab1.page.html
...
<app-explore-container name="Tab 1 page"></app-explore-container>
</ion-content>
The tab1.page.ts file:
import { Component } from '#angular/core';
#Component({
selector: 'app-tab1',
templateUrl: 'tab1.page.html',
styleUrls: ['tab1.page.scss']
})
export class Tab1Page {
constructor() {}
}
I have reviewed the docs about external stylesheets and encapsulation but I'm still lost. Why can't I just add a style to the scss in the tab page's own presently empty scss file? Eg., why doesn't inserting styles into the page component's scss:
tab1.page.scss
#container strong {
font-size: 40px;
}
override this in the explore-container.component.scss?
#container strong {
font-size: 20px;
}
Am I missing an import somewhere? If so, where?
I need advice.
I need to be able to select two elements.
The second element can be selected by pressing "shift".
How do I take to change the background-colour when I click on an element and remodify when I click on another element?
With an image it might be more meaningful:
You can use a condition like this in your html
[style.background-color]="a.xx? 'purple': 'turquoise'"
or in your component like:
#Component({
selector: 'hello',
template: `
<a-item *ngFor="let a of catalogue"
[a]="a"
[style.background-color]="a.xx ? 'green': 'red'">
</a-item> ` })
You can define a class and change the class when somebody click on other box. It is to say, class ".previous_selected" and "now_selected" and onclick on a new element change the class the new element will have now_selected and the previous element the other class
Other option:
Example:
import { Component } from '#angular/core'
#Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent {
colorA = 'red'
colorB = 'blue'
}
In the HTML
<div [style.color]="isSelected ? colorA : colorB">Some example text</div>
isSelected can be a function that say true o false.
You can find more information here
First I couldn't import css through index.html and I get MIME type error:
enter image description here
Refused to apply style from 'http://localhost:4200/css/pink-bluegrey.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
if i try to import it through angular.json then I can't insert ID tag id="themeAsset".
Reason why I want to add id is because i want to do this from https://material.angular.io/guide/theming
function changeTheme(themeName) {
document.getElementById('themeAsset').href = /path/to/my/${themeName}.css;
}
so i could change style for whole app styles by click instead of adding classes to every component
Working Stackblitz :- https://stackblitz.com/edit/angular-jrkmhn
I placed my css inside assets folder i.e. myStyles.css
CSS :-
.myDiv {
background-color: black;
}
index.html
<link id="myLink">
<my-app>loading</my-app>
app.component.html
<div class="myDiv">Css Will Load</div>
<button style="margin-top: 2em" (click)="changeTheme('')">Change Theme</button>
app.component.ts
import { Component } from '#angular/core';
#Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
name = 'Angular';
changeTheme(themeName) {
var elem = document.getElementById('myLink');
elem.setAttribute('href','./assets/myStyles.css');
elem.setAttribute('rel','stylesheet');
elem.setAttribute('type','text/css');
}
}
When looking to the ngx-bootstrap source code here:
modal-options.class.ts
There is an optional class property defined as class?: string;.
What is the way to use it ?
Is it possible to add a custom class like:
this.modalService.config.class = 'myClass';
Before using the servive as for example:
this.modalRef = this.modalService.show(template, {
animated: false
});
This way, I think we can add custom CSS to the displayed modal
I've tried to add a custom class without success.
That class property is not an array, if applicable, does it mean that we can only add one custom class ?
Demo: by adding and overriding the modal class, the modal is not showing
https://stackblitz.com/edit/ngx-bootstrap-3auk5l?file=app%2Fapp.component.ts
Adding the modal class this way do not help:
this.modalRef = this.modalService.show(template, Object.assign({},
this.config, { class: 'gray modal-lg modal' }));
https://stackblitz.com/edit/ngx-bootstrap-awmkrc?file=app%2Fapp.component.ts
According to the ngx-bootstrap documentation about the Modal component (see the component tab), you can add a class member to the config object.
Important: Since the modal element is outside of the component element in the rendered HTML, the CSS encapsulation should be turned off for the component, or the style attributes for the class should be specified in another file, to make sure that the styles are applied to the modal element.
The code snippet below can be executed in this stackblitz.
import { Component, TemplateRef, ViewEncapsulation } from '#angular/core';
import { BsModalService, BsModalRef } from 'ngx-bootstrap';
#Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
modalRef: BsModalRef;
config = {
animated: true,
keyboard: true,
backdrop: true,
ignoreBackdropClick: false,
class: "my-modal"
};
constructor(private modalService: BsModalService) { }
openModal(template: TemplateRef<any>) {
this.modalRef = this.modalService.show(template, this.config);
}
}
with a CSS file like this:
.my-modal {
border: solid 4px blue;
}
.my-modal .modal-header {
background-color: lime;
}
.my-modal .modal-body {
background-color: orange;
}
Update: This other stackblitz shows an example of CSS styles imported from an external file into styles.css, allowing to keep the CSS encapsulation in the component.