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
Related
I'm new on angular,
And I'm trying to make a gallery with a lighbox that shows up when an image is clicked.
I already try the examples with bootstrap and also tried to do it by myself, but when I click on the img-link, the links throws me up to the home page maybe there is a config that I didn't know how to use it or is missing.
I don't know if its a problem about routes or if I need to do other commponent for that.
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
import { Component, OnInit } from '#angular/core';
import { CuadrosService, Cuadro } from '../cuadros.service';
#Component({
selector: 'app-galeria',
templateUrl: './galeria.component.html',
styleUrls: ['./galeria.component.css']
})
export class GaleriaComponent implements OnInit {
Cuadro:any [] = [];
constructor(private _cuadosService:CuadrosService ) {
console.log("constructor")
}
ngOnInit(): void {
this.Cuadro = this._cuadosService.getCuadros();
console.log(this.Cuadro);
}
}
.container-galeria {
display: flex;
flex-wrap: wrap;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: 400px;
background-color: rgba(0, 0, 0, .80);
justify-content: space-around;
}
.img-galeria {
width: 100%;
height: 100%;
object-fit: cover;
padding: 10px;
}
.img-galeria:hover {
transform: scale(1.05);
box-shadow: 0 8px 15px rgba(0, 0, 0, 0.3);
}
.item-galeria:nth-child(1) {
grid-column-start: span 2;
}
.item-galeria:nth-child(2) {
grid-row-start: span 2;
}
.lightbox {}
.lightbox:active {
display: block;
position: fixed;
flex-wrap: wrap;
height: fit-content;
width: fit-content;
max-width: 1200px;
max-height: 800px;
background-color: rgba(0, 0, 0, 0.3);
z-index: 2000;
justify-content: center;
}
<hr>
<div class="container-galeria container">
<div class=" lighbox item-galeria col-4" *ngFor="let cuadro of Cuadro">
<img class="img-galeria" [src]="cuadro.foto" alt="">
</div>
</div>
<app-footer></app-footer>
Any idea? or somthing wrong in my code?
Thanks for the help.
So the way I am seeing it your lightbox is missing a t in the class name.
Secondly I would set a onclick listener for each image to remove and set an active class instead of using the :active css selector. The css selector :active will be removed as soon as the person stops clicking.
You will have to Pass your Element in to the function to determine what image will be active.
Also you might want to add a function to exit the active mode
<div class="lightbox item-galeria col-4" *ngFor="let cuadro of Cuadro" (click)="toggleActive($event, item)">
<img class="img-galeria" [src]="cuadro.foto" alt="">
</div>
The function:
import { Component, OnInit } from '#angular/core';
import { CuadrosService, Cuadro } from '../cuadros.service';
#Component({
selector: 'app-galeria',
templateUrl: './galeria.component.html',
styleUrls: ['./galeria.component.css']
})
export class GaleriaComponent implements OnInit {
Cuadro:any [] = [];
constructor(private _cuadosService:CuadrosService ) {
console.log("constructor")
}
ngOnInit(): void {
this.Cuadro = this._cuadosService.getCuadros();
console.log(this.Cuadro);
}
toggle(event, item): void {
if(item.classList.contains("active")){
item.classList.remove("active"));
}else{
item.classList.add("active"));
}
}
I might add that I didn't test the code and some parts of code may need a little tweak.
I hope I could help.
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've got a lot of table rows in my app. Some are links, some are not. Here is an example of one that is:
<tr [routerLink]="['/invoices', invoice?.invoice.id || 0, 'sms']">
I want to style all tr's with a routerLink like this:
tr[routerLink] {
cursor: pointer;
}
But it does not work. What is the correct CSS here? thanks
Use the compiled attribute ng-reflect-router-link : stackblitz
a[ng-reflect-router-link] {
color: red;
font-weight: 700;
}
tr[ng-reflect-router-link] {
cursor: pointer;
}
You can use a directive to add a class to every row with a routerLink attribute. Then style it in the css like normal.
import { Directive, HostBinding } from '#angular/core';
#Directive({
selector: 'tr[routerLink]'
})
export class ClickableTableRowDirective {
#HostBinding('class')
className = 'clickable-table-row';
constructor() {
}
}
.clickable-table-row {
cursor: pointer;
}
html:
<a [routerLink]='link' [ngClass]="{'router-link-active': true">{{name}}</a>
css:
.router-link-active {
cursor: pointer;
}
In your case the problem because of '[ ]' these brackets
so if you want to indentify which is the link and which is not then try below code
here's is example
<tr [routerLink]="['/invoices', invoice?.invoice.id || 0, 'sms']" routerLinkActive="active>
and in style.css
tr[routerLinkActive] {
color: red;
}
here is Stackblitz demo
this style only apply on those are links
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',
})
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;
}
`]
});