Is it possible to do the following....
app.component.html
<app-nav></app-nav>
<div class="page-wrapper">
<div class="page-content clearfix">
<router-outlet></router-outlet>
</div>
</div>
Can I apply following CSS to page-wrapper and page-content class when router to particular Component and after going to other Component remove as it is... ?
CSS
.page-content {
margin-bottom: 0px;
}
#media screen and (min-width: 1367px) {
.page-wrapper {
width: 100%;
}
}
I also try View Encapsulation option (None) but this apply style to header which is always their... even I route to other Component.
#Component({
// ...
encapsulation: ViewEncapsulation.None,
styles: [
// ...
]
})
You are on the right track and need to style the page-wrapper and page-content from each component that displayed in the <router-outlet> by using ViewEncapsulation.None. So, by writing styles like this, every time the parent elements's(page-wrapper and page-content) styles will be override based on component.
#Component({
selector: 'component-x',
encapsulation: ViewEncapsulation.None,
styles: [`
.page-wrapper, .page-content{
background-color: red;
}
`]
});
#Component({
selector: 'component-y',
encapsulation: ViewEncapsulation.None,
styles: [`
.page-wrapper, .page-content{
background-color: green;
}
`]
});
Related
HTML
<div class="nav--small nodeLevel newColor" id="rowItem-{{i}}" *ngFor="let root of rootzTemplates; let i=index" (click)="nodeClickLevel1(root,i)">
<p style="padding: 19px 1px;color: #fff; text-align: center;">
{{root}}
</p>
</div>
CSS
.activeColor {
background-color: grey;
}
JavaScript
constructor(private el: ElementRef) { }
nodeClickLevel1(root, id){
this.myTag = this.el.nativeElement.querySelector("#rowItem-" + id);
this.myTag.classList.remove('activeColor');
this.myTag.classList.add('activeColor');
}
Now div is dynamic, say number of div element is 6, on click event i have to change particular clicked div background-color to grey and rest of color should remain same.
Now if I click on div say 2, only 2nd div has highlight with grey color, rest of the color should remain same and vice versa.
Change your function like this
nodeClickLevel1(root, id){
this.myTag = root
}
change your template code like this
[class.newColor]="root === myTag"
Hope it will solve your problem.
Your code can be much simpler, no need for troublesome ElementRef, no need for index ids, etc.
So here is the code:
//our root app component
import { Component, NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
#Component({
selector: 'my-app',
// templateUrl: "app.html",
template: `
<div class="nav--small nodeLevel newColor" [class.activeColor]="root === myTag" *ngFor="let root of rootzTemplates" (click)="nodeClickLevel1(root)">
<p style="padding: 19px 1px;color: #fff; text-align: center;">{{root}}</p>
</div>
`,
})
export class App {
name: string;
constructor() { }
protected myTag:any;
public rootzTemplates: any[] = ["first", "2nd", "3rd"];
nodeClickLevel1(root){
this.myTag = root;
}
}
#NgModule({
imports: [BrowserModule],
declarations: [App],
bootstrap: [App],
})
export class AppModule {}
and css:
.activeColor {
background-color: grey !important;
}
.nav--small{
background-color: black;
}
Here is the working PLNKR link:
http://plnkr.co/edit/oRZa3E5WtYpusKHd
I am working on angular formio, in that I am using a custom css class, name CustomCSS I have added the same in css file as follows
Here is stackblitz
app.component.scss
.CustomCSS {
margin: auto;
width: 50%;
border: 3px solid rgb(1, 248, 1);
padding: 10px;
background-color: coral;
}
app.component.ts
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
ngOnInit() {
debugger;
this.triggerRefresh = new EventEmitter();
this.http.get('http://....')
.subscribe(
response => {
this.form = response.json();// this is my html script from DB
},
err => {console.error(err)}
);
}
}
app.component.html
<formio [refresh]="triggerRefresh" [form]="form" [submission]="submission" (submit)="onSubmit($event)"></formio>
My Html this.form script as follows
{
"components":[
{
"label":"City",
"widget":"choicesjs",
"customClass":"CustomCSS",
"tableView":true,
"data":{
"values":[
{
"label":"abc",
"value":"abc"
]
},
"selectThreshold":0.3,
"calculateServer":false,
"validate":{
"required":true
},
"key":"city",
"type":"select",
"indexeddb":{
"filter":{
}
},
"input":true
},
{
"type":"button",
"label":"Submit",
"key":"submit",
"disableOnInvalid":true,
"input":true,
"tableView":false
}
],
"id":4
}
In my script also the css class name available but it is not appending in the view.
One possible way to make it work from your component is to modify the style encapsulation for that component.
import { Component, OnInit, ViewEncapsulation } from '#angular/core'; // <-- add ViewEncapsulation
#Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ],
encapsulation: ViewEncapsulation.None // <-- add this line
})
More information on encapsulation.
That being said.
I still recommend to use global styles and implement css selectors to target formio generated html elements like in your example:
#app formio .control-label {
font-weight: bold;
}
I'm trying to do a simple thing in my Angular 7 application.
Basically, I have a title and when I click on it, a comment will ease-in from above to place itself just below the title. The problem is, when the comment is moving, it shows on top of the title which is not quite the effect wanted.
I tried adding a z-index property on the CSS to elevate the title but to no avail.
app.component.ts
import { Component } from '#angular/core';
import { trigger, transition, style, animate } from '#angular/animations';
#Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ],
animations: [
trigger('slideInOut', [
transition(':enter', [
style({transform: 'translateY(-100%)'}),
animate('200ms ease-in', style({transform: 'translateY(0%)'}))
]),
transition(':leave', [
animate('200ms ease-in', style({transform: 'translateY(-100%)'}))
])
])
]
})
export class AppComponent {
visible = false;
showMessage() {
this.visible = !this.visible;
}
}
app.component.html
<div (click)="showMessage()">
<div class="title">Click here to reveal the comment</div>
<div class="title">25/04/2019 17:30:00</div>
<div class="comment" *ngIf="visible" [#slideInOut]>Lorem ipsum...</div>
</div>
app.component.css
.title {
background-color: aqua;
z-index: 1000;
cursor: pointer;
}
.comment {
background-color: red;
z-index: 0;
}
I created a StackBlitz to show the problem.
Thanks for your help!
In order to z-index work. You need to add position: relative or absolute to the element. In your case, add also position: relative to the .title.
You can add the following:
.title, .comment{
position:relative;
}
z-index only works on positioned elements (position: absolute, position: relative, position: fixed, or position: sticky).
See Fork
app.html
<app-chat></app-chat>
chat.html
<h1>Hello</h1>
chat.ts
import { Component, OnInit } from '#angular/core';
#Component({
selector: 'app-chat',
templateUrl: './chat.component.html',
styleUrls: ['./chat.component.css']
})
export class ChatComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}
chat.css
h1 {
background-color: #000;
}
I need to know why the chat.css doesn't work in my browser. When I used CSS directly without chat component it works (like below).
app.html
<h1>Hello</h1>
app.css
h1 {
background-color: #000;
}
So what is the solution?
Try this!
::ng-deep h1{
background-color: #000;
}
Try !important in your chat.css file
h1{
background-color: #000 !important;
}
or
Use the powerful weapon of CSS style.css. But, before using it you have to set the class name for h1 tag.
chat.html
<h1 class="exampleClassName">Helo<h1>
Next, in your style.css file
.exampleClassName{
background-color: #000;
}
I did an example and it works: https://stackblitz.com/edit/angular-u99pry
How do I move my html section from app.compontent.ts to a seperate html documenet? It wont work to just att the html code into the generated class app.component.ts.
Also I would like to move the css section as well to seperate css document.
If someone could help me or point me to the right direction I would be greatfull
import { Component } from '#angular/core';
import { Hero } from './hero';
import { HeroService } from './hero.service';
import { OnInit } from '#angular/core';
#Component({
selector: 'app-root',
template: `
<h1>{{title}}</h1>
<button> my Button </button>
<h2 pButton type="button" icon="fa-check" iconPos="right">My Heroes</h2>
<ul class="heroes">
<li *ngFor="let hero of heroes"
[class.selected]="hero === selectedHero"
(click)="onSelect(hero)">
<span class="badge">{{hero.id}}</span>{{hero.name}}
</li>
</ul>
<hero-detail [hero]="selectedHero"></hero-detail>
`,
styles: [`
.selected {
background-color: #CFD8DC !important;
color: white;
}
.heroes {
margin: 0 0 2em 0;
list-style-type: none;
padding: 0;
width: 15em;
}
.heroes li {
cursor: pointer;
position: relative;
left: 0;
background-color: #EEE;
margin: .5em;
padding: .3em 0;
height: 1.6em;
border-radius: 4px;
}
`],
providers: [HeroService]
})
export class AppComponent implements OnInit{
title = 'Tour of Heroes';
heroes: Hero[];
selectedHero: Hero;
constructor(private heroService: HeroService){
}
getHeroes(): void{
this.heroService.getHeroes().then(heroes => this.heroes = heroes);
}
onSelect(hero: Hero): void{
this.selectedHero = hero;
}
ngOnInit(): void{
this.getHeroes();
}
}
Make use of templateUrl instead of template in Component Decorator
templateUrl - url to an external file containing a template for the
view
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
Add all the code to app.component.html
create separate html and css example : home.component.html and home.component.css
in component.ts file add below code
import { Component, OnInit, TemplateRef } from '#angular/core';
#Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.css']
})
You can add the html code in a separate html file for example: app.component.html
Copy the template without the inside the app.component.html .
Later in your #Component make the below changes:
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
})