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
}
Related
I'm trying to call this auto detect function from my component.ts file to my .scss file and I don't know how to or if it is even possible.
example.component.scss
.content {
display: flex;
align-items: center;
text-align: center;
height: getScreenHeight; <--- ERROR
width: getScreenWidth; <--- ERROR
}
example.component.ts
import { Component, OnInit, HostListener } from '#angular/core';
#Component({
selector: 'app-example',
templateUrl: './example.component.html',
styleUrls: ['./example.component.scss']
})
export class exampleComponent implements OnInit {
public getScreenWidth: any;
public getScreenHeight: any;
constructor() { }
ngOnInit(): void {
this.getScreenWidth = window.innerWidth;
this.getScreenHeight = window.innerHeight;
}
#HostListener('window:resize', ['$event'])
onWindowResize() {
this.getScreenWidth = window.innerWidth;
this.getScreenHeight = window.innerHeight;
}
}
For reference I am using this functionality detection
Tried to call in html and in the .scss. Nothing has worked and have not found similar problems/questions
CSS is not that dynamic so approaching it from the SCSS file will give you problems, instead use inline styles for such problems.
<div class="content" [ngStyle]="{ height: getScreenHeight width: getScreenWidth }">
<!--content inside here-->
</div>
Tried to change the background color on scroll to the sticky header but not working. How to do it? when I scroll to the bottom of the body I need to change the header background color. How to do it?
app.component.html
<div class="header sticky">
</div>
app.component.css
.sticky {
position: -webkit-sticky;
position: sticky;
top: 0px;
}
Demo: https://stackblitz.com/edit/sticky-header-hyibz9?file=app%2Fheader%2Fheader.component.css
You can use ngClass for this and HostListener to check if user scrolled at the buttom
html
<div class="header sticky" [ngClass]="isBottom ? 'bottom' : 'top'">
</div>
ts
import { Component, OnInit, HostListener } from '#angular/core';
#Component({
selector: 'app-header',
templateUrl: './header.component.html',
styleUrls: ['./header.component.css']
})
export class HeaderComponent implements OnInit {
isBottom: boolean;
constructor() {}
ngOnInit() {}
#HostListener('window:scroll', [])
onScroll(): void {
if (window.innerHeight + window.scrollY >= document.body.offsetHeight) {
this.isBottom = true;
} else {
this.isBottom = false;
}
}
}
css
.sticky {
position: -webkit-sticky;
position: sticky;
top: 0px;
}
.header {
height: 50px;
}
.top {
background-color: blue;
}
.bottom {
background-color: yellow;
}
import { Component, OnInit, HostListener } from '#angular/core';
#Component({
selector: 'app-header',
templateUrl: './header.component.html',
styleUrls: ['./header.component.css']
})
export class HeaderComponent implements OnInit {
isBottom: boolean;
constructor() {}
ngOnInit() {}
#HostListener('window:scroll', [])
onScroll(): void {
if (window.innerHeight + window.scrollY >= document.body.offsetHeight) {
this.isBottom = false;
} else if (window.scrollY) {
this.isBottom = false;
} else {
this.isBottom = true;
}
}
}
My app.component.html is as below, app-login is a Component
<app-login></app-login>
and If I write below code in login.component.scss
html, body{
height: 100% !important;
}
I get below style
html[_ngcontent-c3], body[_ngcontent-c3] {
height: 100% !important;
}
How do I target HTML from component, please suggest.
You can use Renderer2 to change the html and body style from component. For example:
import { Component, Renderer2 } from '#angular/core';
#Component({
selector: 'home',
templateUrl: './home.component.html',
styleUrls: [ './home.component.css' ]
})
export class HomeComponent {
name = 'Home';
constructor(private renderer: Renderer2) {
this.renderer.setStyle(document.body, 'background-color', 'yellow');
this.renderer.setStyle(ddocument.getElementsByTagName('html')[0], 'background-color', 'blue');
}
}
See my answer to a similar question here: https://stackoverflow.com/a/48718382/9262488
In my Angular4 app, when I'm scrolling down some list and click a list item to see details which is on another route, needs to scroll up to go to top of the page.
I have found some answers to set the scroll to top using JQuery. But is it possible to set the scroll to top using CSS(SASS may be) only?
try this, without any css. In your app component(bootstrap) subscribe the router and check event is a instance of NavigationEnd and then scoll window to top
import {Component, ElementRef, Inject} from '#angular/core';
import {NavigationEnd, Router} from '#angular/router';
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
elementRef: ElementRef;
constructor(#Inject(ElementRef) elementRef: ElementRef,
private router: Router) {
this.elementRef = elementRef;
router.events.subscribe((myEvent) => {
if (myEvent instanceof NavigationEnd) {
window.scrollTo(0, 0);
}
});
}
}
Here is working plunker : https://plnkr.co/edit/IyO1Cp?p=preview
Here is quick example using css based smooth scrolling only. And here is another SO thread with more answers.
Hope this helps.
html {
scroll-behavior: smooth
}
a {
display: block;
background: #fff;
padding: 4px;
}
div {
height: 1000px;
width: 200px;
padding: 4px;
}
#red {
background: red;
}
#blue {
background: blue;
}
#green {
background: green;
}
#yellow {
background: yellow;
}
<a name="top"></a>
Red
Blue
Green
Yellow
<div id="red">Top</div>
<div id="blue">Top</div>
<div id="green">Top</div>
<div id="yellow">Top</div>
I am using angular2/4's Ng2-Completer plugin and am having trouble with styling of the component. I want to change the background dropdown to "red" and the input box to be blue.
The following is my plunkr:
https://plnkr.co/edit/sVnfpBiEb5jBdtul4ls9?p=preview
I tried to include the following CSS, but it does not appear to impact anything:
.completer-row {
display: inherit;
background:blue;
}
.completer-selected-row {
background-color: lightblue;
color: yellow;
}
.completer-row p {
position: relative;
top: 50%;
transform: translateY(50%);
}
.completer-dropdown-holder {
position: absolute;
background: red;
}
.customid {
background:blue;
}
My component:
import { Component } from '#angular/core';
import { CompleterService, CompleterData } from 'ng2-completer';
import {Observable} from 'rxjs/Observable';
import 'rxjs/Rx';
#Component({
selector: 'my-app',
styleUrls: [
'./app.component.css'
],
template: `<h1>Search color</h1>
<ng2-completer id="customid" [(ngModel)]="searchStr" [datasource]="searchData" [minSearchLength]="0" [clearSelected]="true" (selected)="onSelected($event)"></ng2-completer>
<p>Selected: {{selectedColor}}</p>
`
})
export class AppComponent {
protected searchStr: string;
protected dataService: CompleterData;
protected selectedColor: string;
protected searchData = ['red', 'green', 'blue', 'cyan', 'magenta', 'yellow', 'black'];
protected onSelected(item: CompleterItem) {
this.selectedColor = item? item.title: "";
}
}
You can use inputClass propery of ng2-completer.
For example with bootstrap:
<ng2-completer [inputClass]="'form-control form-control-inline'" ...></ng2-completer>
You can style the angular ng2 completer like this:
::ng-deep .completer-row{
}
Angular 2 have a safety feature where CSS only work on HTML files of their respected component. Or css have to go in the global styles.css file for global use. However you can force CSS to apply by adding hots: >>> .class-name this method will force the css to apply to a child component.
More info on this thread Angular 2: How to style host element of the component?
https://alligator.io/angular/styles-between-components-angular/