In my angular app, i am adding a class name to body like:
ngOnInit() {
this.store.updatePageClass('page-quoteCart');
}
on the page.css I am writing a class like:
#media only screen and (min-width: 320px) and (max-width: 620px) {
.page-quoteCart{
border:2px solid red; //but not added
}
}
But not getting the output. If I write the same in style.css in assets folder that works. what is the issue here?
how to write the css according to the page?
Please add the encapsulation: ViewEncapsulation.None in your html.
It will solve your issue.
for example after you update your encapsulation: ViewEncapsulation.None - your component file will look like this:
import { Component, ViewEncapsulation } from '#angular/core';
#Component({
selector: 'xxxxx',
templateUrl: 'xxxxx.html',
styleUrls: ['xxxx.scss'],
encapsulation: ViewEncapsulation.None
})
Related
As in question. I use Vue, Vuex(Nuxt) and we also share all mixins and sass variables using:
#nuxtjs/style-resources": "^1.0.0"
Which is newer version of "nuxt-sass-resources-loader": "^2.0.5"
I know that there i spossibility with Webpack such as here
So my question is - is it posiibile to do it in similar way and how to configure it? What should I have installed and how can I add it to my nuxt.config.js?
EDIT:
I also found that article but for me it is not working.
Short answer: yes.
SASS offers the option to export variables, which you can import as module and use like any other object. Webpack with sass-loader and node-sass handles the imports.
Example:
// in assets/scss/variables.scss
$white-color: #fcf5ed;
// the :export directive is the magic sauce for webpack
:export {
whitecolor: #{$white-color};
}
// in store.js
import Styles from '~/assets/scss/variables.scss'
export const state = () => ({
styles: {...Styles}
})
// in component
...
computed: {
styles() {
return this.$store.state.styles;
}
}
Longer answer: You can also just use css variables for everything.
E.g.
// in assets/scss/variables.scss
$white-color: #fcf5ed;
:root {
--whitecolor: #{$white-color};
}
// in component
...
mounted() {
this.$el.style.color = 'var(--whitecolor)';
}
<style>
.component {
color: var(--whitecolor);
}
</style>
I'm using ion-img in my ionic2 application to load my pictures correctly. However, I wonder if there is a way to indicate to the user that the picture is actually loading.
Thank you for your help!
EDIT : Here is the answer if you absolutely need to use the ion-img tag. If not, you should use ionic-image-loader as AdminDev826 suggested.
I finally solved that problem with CSS! When an image is loading in ionic 2, the ion-img tag doesn't have any class. However, when the image is finally loaded, the ion-img tag get the class "img-loaded".
Here is my solution :
<ion-img [src]="img.src"></ion-img>
<ion-spinner></ion-spinner>
And my CSS :
.img-loaded + ion-spinner {
display:none;
}
I hope it can help someone!
I finally solved that problem with CSS! When an image is loading in ionic 2, the ion-img tag doesn't have any class. However, when the image is finally loaded, the ion-img tag get the class "img-loaded".
Here is my solution :
<ion-img [src]="img.src"></ion-img>
<ion-spinner></ion-spinner>
And my CSS :
.img-loaded + ion-spinner {
display:none;
}
I hope it can help someone!
If you want to use the img tag instead of ion-img here is the solution:
<img src="{{image.src}}" (load)="loaded = true" [ngClass]="{'img-loaded':loaded}" [hidden]="!loaded" *ngIf="image_exists" />
<ion-spinner [ngClass]="{'center':true}" *ngIf="!loaded"></ion-spinner>
In your CSS file you should write the following:
.img-loaded + ion-spinner {
display:none;
}
// .center in my case to make the spinner at the center
.center{
margin-left: auto;
margin-right: auto;
display: block;
}
loaded is a boolean variable with false default value you have to define in your component.
Please use ionic-image-loader plugin
Install the NPM Package
npm install --save ionic-image-loader
Install Required Plugins
npm i --save #ionic-native/file
ionic plugin add cordova-plugin-file --save
npm i --save #ionic-native/transfer
ionic plugin add cordova-plugin-file-transfer --save
Import IonicImageLoader module
Add IonicImageLoader.forRoot() in your app's root module
import { IonicImageLoader } from 'ionic-image-loader';
// import the module
#NgModule({
...
imports: [
IonicImageLoader.forRoot()
]
})
export class AppModule {}
Then add IonicImageLoader in your child/shared module(s)
import { IonicImageLoader } from 'ionic-image-loader';
#NgModule({
...
imports: [
IonicImageLoader
]
})
export class SharedModule {}
Your solution is not the best one because the app still downloads all the images, For example in a Facebook like app, You will be downloading all the images from the Feed to your app, This will make everything super slow.
Use this:
https://github.com/NathanWalker/ng2-image-lazy-load
ionic-image-loader not works in ionic4+. You must create a component:
HTML
<ion-spinner name="dots" [hidden]="viewImage" color="primary"></ion-spinner>
<ion-img #image alt=""(ionImgDidLoad)="loadImage()" (ionError)="errorLoad()"></ion-img>
Typescript
#Component({
selector: 'preloader-img',
templateUrl: './preloader-img.component.html',
styles: [`
ion-spinner {
display: block;
margin: auto;
}
`],
})
export class PreloaderImgComponent implements AfterViewInit {
viewImage = false;
#Input() url: string;
#ViewChild('image', { static: false }) imageRef: IonImg;
ngAfterViewInit() {
this.imageRef.src = this.url;
}
loadImage() {
this.viewImage = true;
}
errorLoad() {
this.imageRef.src = '<your_default_img>';
}
}
I'm trying to declare some basic css rules to use them globally in my app. Like pull-rx, pull-lx and so on...
After writing these rules into app.scss, the main.css file inside the build folder gets updated correctly, but when it comes to use one of these rules inside a "LoginPage" for example, each of the rules I've declared before are ignored. Am I missing something?
If I write the pull-rx class inside the login.scss file instead, it will work. Is there a way to get a class globally?
app.scss:
.pull-rx {
float: right !important
}
.pull-lx{
float: left !important
}
app.module.ts:
import { NgModule, ErrorHandler } from '#angular/core';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { LoginPage } from '../pages/login/login';
#NgModule({
declarations: [
MyApp,
HomePage,
LoginPage,
],
imports: [
IonicModule.forRoot(MyApp)
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
HomePage,
LoginPage,
],
providers: [{ provide: ErrorHandler, useClass: IonicErrorHandler }]
})
export class AppModule { }
login.html:
<ion-header>
<ion-navbar>
<ion-title>
Astrid <small><i>Beta</i></small> <span class="pull-rx">Login</span>
</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
</ion-content>
I've figured this out. Since Ionic uses scsss as preprocessor, I have to set the semicolons ";" at the end of the rule. Since I am used to code in sass that were causing the problem.
My question is about the way of have access to childerns component methods from parent component. I found solution which is describe using below example, but I afraid that may be I do it in wrong, not 'angular2 right' way.
For instance we have child:
#Component({ ... })
export class Modal {
...
open() {
...
}
}
And parent:
import { Modal } from '../common';
...
#Component({
selector: 'editor',
directives: [ Modal ],
templateUrl: './editor.html',
...
})
export class Editor {
_modal = null;
...
bindModal(modal) { this._modal=modal; }
open() {
this._modal.open();
}
}
And in editor.html:
<button (click)="open()">Open Editor</button>
<modal #editModal>{{ bindModal(editModal) }}
Here is my editor body in modal (popup) window
...
</modal>
This is solution for have access from Editor component to the open() method inside Modal component. It is a little bit tricky. The question is: is there a simplest and more direct way without using 'bindModal' method?
There are many ways to do it,
#ViewChild
import {ViewChild} from '#angular/core';
import { Modal } from '../common';
...
#Component({
selector: 'editor',
directives: [ Modal ],
templateUrl: './editor.html',
...
})
export class Editor {
#ViewChild(Modal) md:Modal;
Open()
{
this.md.open();
}
}
Other way is to use #localVariable and from parent itself you can access child methods.
import {Component, ViewEncapsulation} from '#angular/core';
import {Router, RouteConfig, ROUTER_DIRECTIVES} from '#angular/router-deprecated';
import {Home} from './components/home/home';
import {About} from './components/about/about';
import {RepoBrowser} from './components/repo-browser/repo-browser';
#Component({
selector: 'seed-app',
providers: [],
pipes: [],
directives: [ROUTER_DIRECTIVES],
styles: [require('bootstrap.scss')],
encapsulation: ViewEncapsulation.None,
templateUrl: 'app/seed-app.html',
})
#RouteConfig([
{ path: '/home', component: Home, name: 'Home', useAsDefault: true },
{ path: '/about', component: About, name: 'About' },
{ path: '/github/...', component: RepoBrowser, name: 'RepoBrowser' },
])
export class SeedApp {
constructor() {}
}
The important part is
styles: [require('bootstrap.scss')],
So bootstrap(the css library) is pretty big but I want to use it in my angular2 app so I made the main component have Encapsulation of none so it will share the styles with the page and then I included bootstrap.scss as suggested.
My question is: is it ok to have such a large string (thousands of lines) inside the styles performance wise? is it better to put bootstrap in the head of the page like a regular css file?
Angular2 will provide a build step (still work in progress AFAIK) that does such processing before the app is served to the browser. If you use this, it shouldn't matter, orherwise I'd try to avoid using large CSS files this way. Even when there is no rewriting to do because you are using ViewEncapsulation.None everywhere, Angular2 might still parse the CSS which is redundant work.