Problem:
I have built an angular application. There I want to add a CSS class to the body whenever It navigates to that components and remove it whenever the user leaves out of that component.
This is what I have done. In the global CSS file, I have defined a style like this.
.background-color {
background-image: linear-gradient(to right,#3f51b5, #00bcd4) !important;
}
And In the login component, I have done something like this.
import { Component, OnInit } from "#angular/core";
#Component({
selector: "app-login",
templateUrl: "./login.component.html",
styleUrls: ["./login.component.css"]
})
export class LoginComponent implements OnInit {
constructor() {
}
ngOnInit() {
window.onload = function() {
document.body.classList.add("background-color");
};
}
}
But this is not working correctly. When I navigate to this component the styles not added but when I refresh the pages it adds the styling to the body. I tried a lot to find a solution to this problem but I was unable to do so. Can someone help me to solve this issue? Thank you!
No need to write onLoad function inside the ngOnInit() method. I suggest you read the angular official ngOnit().
rewrite your ngOnInit() like below
ngOnInit() {
let element = document.getElementById("bg-color");
element.classList.add("background-color");
}
and your component.html file
<p id="bg-color">
Start editing to see some magic happen :)
</p>
Live Demo
Since you are using angular routing, this will not work unless you navigate to that component manually, because when you navigate to a router link, it does not reload the application, it justs removes the other components and add the new component. It does not trigger the onLoad event. But when you reload manually, it will work.
try the following
export class LoginComponent implements OnInit {
loaded: boolean = false;
constructor() {
}
ngOnInit() {
this.loaded = true;
}
and on the component html
<body [class.background-color]="loaded"></body>
or something on the similar lines.
Related
Looking for help to troubleshoot this.
When I try to create a card on the UI using kendo, it works on stackblitz:
https://stackblitz.com/edit/5zvomp--run?file=app/app.component.ts
but when trying to create in my angular app, it doesnt show up properly. There are no errors in the console and import { LayoutModule } from '#progress/kendo-angular-layout'; is also there.
html template:
<kendo-card class="user-card">
<kendo-card-header class="k-hbox">
<div>
<h1 kendoCardTitle>Turtle</h1>
<p kendoCardSubtitle>Turtle is a small animal</p>
</div>
</kendo-card-header>
</kendo-card>
angular component:
import { Component, OnInit, Input } from '#angular/core';
import * as faEllipsisH from '#fortawesome/pro-regular-svg-icons/faEllipsisH';
#Component({
selector: 'user-card',
templateUrl: './user-card.component.html',
styleUrls: ['./user-card.component.css']
})
export class UserCardComponent implements OnInit {
#Input() public card: any;
public faEllipsisH = faEllipsisH;
public constructor() { }
public ngOnInit(): void {
}
}
The only way that I was able to replicate this was if you did not import the Kendo-UI stylesheet.
Take a look at this example: https://stackblitz.com/edit/angular-pnudiu?file=index.html
If you uncomment out the commented line in index.html, you get the properly styled card. For more information on how to include the styling and themes, visit this documentation: https://www.telerik.com/kendo-angular-ui/components/styling/#toc-including-themes-by-using-precompiled-css
I want to create an HTML web component and i need to import CSS file but I want to inject it into my shadow dom. I have some code like below:
import introHTML from './Intro.html';
import introCss from './Intro.css';
class IntroWebComponent extends HTMLElement{
constructor(){
super();
this.defineClassProp();
}
defineClassProp(){
this._shadowRoot = this.attachShadow({ mode: 'open' });
this._html = introHTML
this._element = document.createElement('template');
this._element.innerHTML = this._html;
this._element.append(`<style>${introCss}</style>`)
this._shadowRoot.appendChild(this._element.content.cloneNode(true));
}
}
window.customElements.define('index-intro', IntroWebComponent);
but 'rollup-plugin-postcss' keep injecting css to my main html head and i dont know how to stop it
just config your rollup to stop inject style in your js module:
the default config is:
postcss({
inject: { insertAt: 'top' }
})
you must change it to:
postcss({
inject:false
})
im trying to create a new lit element component extending from other component
but render method don´t works.
the component is empty..
export default class ChildComponent extends FatherComponent {
static get styles() {
return css`
:host {
display: block;
}`;
}
render() {
return html`<h1>Hi</h1>`;
}
}
window.customElements.define('child-component', ChildComponent);
I had the same kind of issue today. It seems that render() was not triggered.
To solve my issue I had to call super.connectedCallback() in the connectedCallback() methods for both child and parent.
I also call super() in the constructor.
Hope that helps.
I'm a noob and I'm trying to compile a JSX following this tutorial :
http://xabikos.com/2015/03/18/Using-Reactjs-net-in-Web-Forms/
using reactjs.net
I'm trying to define a class like this...
class First extends React.createClass {
render(){
}
constructor(props) {
}
componentDidMount() {
}
}
Render method seems to work fine, but componentDidMount is not called,
and the constructor is also never called, any idea why is this happening?
You Are mixing The concept of function based components and class-based components, You can not use createClass while using class-based Components, That's why you are not getting what you desire.
The right way to make a component using class is this:-
import React from 'react';
class First extends React.Component{
constructor(props) {
super(props);
}
componentDidMount() {
}
render(){
}
}
And When You have to make components Using plain functions You have to use this:-
var First = React.createClass({
render:function(){
//Your view
}
})
I Hope it will solve your problem
When a user logs in, I've tried adding a class to the 'logout form' that has a 'display: block' even with the '!important' tag which would override any display property on the logout form. I've tried reloading the page because that does bring up the logout form once a user logs in but it gets stuck in an infinite loop.
import React from 'react';
import ReactDOM from 'react-dom';
export default class AccountsUI extends React.Component {
componentDidMount() {
Accounts._loginButtonsSession.set('dropdownVisible', true);
this.view = Blaze.render(Template.loginButtons,
ReactDOM.findDOMNode(this.refs.container));
setTimeout(function () {
window.requestAnimationFrame(function() {
var node = ReactDOM.findDOMNode();
if (node !== undefined){
Accounts.onLogin(function(user){
document.getElementById('login-dropdown-list').className = "accounts-dialog hide-div"
console.log(document.getElementById('login-dropdown-list').className)
})
}
});
}, 250)
}
componentWillUnmount() {
Blaze.remove(this.view);
}
render() {
return <span ref="container" />
}
}
I'm also going to change how the class additions are triggered. I know that waiting 1/4 a second is very primitive and won't always work.
The Meteor.userId() function is reactive, which means if you call it in getMeteorData() it will be called again each time the userId changes. Save it to this.data, and use it in render().
I'd also suggest you create a React wrapper called LogoutUIWrapper for the Blaze component that only does wrapping and nothing else, just to make your life easier. See here: https://www.meteor.com/tutorials/react/adding-user-accounts
So you'll need to do something like this:
export default class AccountsUI extends React.Component {
getMeteorData() {
return {
userId: Meteor.userId(),
};
}
render() {
return (
<div>
{ this.data.userId ? null : <LogoutUIWrapper /> }
</div>
);
}
}
This way the LogoutUIWrapper component will only appear when the user is logged in.