I have a CSS file I ONLY want to be loaded when a component is on the page.
I have tried the following:
#Component({
selector: 'testview-testview',
templateUrl: './templates/testview.html',
styles: [
"../../../assets/vendors/custom/reveal.js-3.6.0/css/reveal.css",
"../../../assets/vendors/custom/reveal.js-3.6.0/css/theme/black.css"
],
})
However without any luck. Does anyone know of a way to do this?
EDIT
So i am attempting to follow the answer below
Here is my folder structure:
My Component now looks like this:
import {Component, OnInit} from '#angular/core';
declare var Reveal: any;
#Component({
selector: 'testview-testview',
templateUrl: './templates/testview.html',
styleUrls: ['./templates/testview.css'],
})
export class TestviewComponent implements OnInit {
constructor() {
}
ngOnInit() {
Reveal.initialize({});
}
}
And my testview.css file looks like this:
#import url("../../../assets/vendors/custom/reveal.js-3.6.0/css/reveal.css");
#import url("../../../assets/vendors/custom/reveal.js-3.6.0/css/theme/black.css");
You have to inside the urls inside array of styls: styleUrls instead of styles
SO
#Component({
selector: 'testview-testview',
templateUrl: './templates/testview.html',
styleUrls: [
"../../../assets/vendors/custom/reveal.js-3.6.0/css/reveal.css",
"../../../assets/vendors/custom/reveal.js-3.6.0/css/theme/black.css"
],
})
EDIT:
#Component({
selector: 'testview-testview',
templateUrl: './templates/testview.html',
styleUrls: ['./templates/testview.css'
],
})
in you css ./templates/testview.css import files
#import url("../../../assets/vendors/custom/reveal.js-3.6.0/css/reveal.css");
#import url("../../../assets/vendors/custom/reveal.js-3.6.0/css/theme/black.css");
Related
I want to try to load css from a server/external source intro angular. I'm trying to use the DomSanitizer already but without succes. The stylesheet is shown inside the network tab of chrome but the html does not apply the stylesheet.
chrome networktab:
Inside the TS file:
import {Component, OnInit, ViewEncapsulation} from '#angular/core';
import {DomSanitizer} from "#angular/platform-browser";
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
encapsulation: ViewEncapsulation.None,
})
export class AppComponent implements OnInit{
title = 'angulardynamicss';
cssUrl = 'http://localhost:8080/api/csspoc/asFile'
constructor(public sanitizer: DomSanitizer) {}
ngOnInit(): void {}
}
And HTML looks like:
<link rel="stylesheet" [href]='sanitizer.bypassSecurityTrustResourceUrl("http://localhost:8080/api/csspoc/asFile")'>
<p class="test">hello</p>
The stylesheet file contains:
.test {
background-color: blue;
}
p{
color:yellow;
}
Why do you inject it in the AppComponent? Can you not just add the <link> tag in the <head> of your index.html?
I am following getting started guide https://ng-bootstrap.github.io/#/getting-started. trying the basic alert to work. it display the alert message not the style with bootstrap style sheet.
Any idea what I am missing here?
app.module.ts
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { AppComponent } from './app.component';
import { NgbModule } from '#ng-bootstrap/ng-bootstrap';
#NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,NgbModule.forRoot(),
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
app.component.ts
import { Component } from '#angular/core';
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'app';
}
app.component.html
<div style="text-align:center">
<h1>
Welcome to {{ title }}!
</h1>
<p>
<ngb-alert [dismissible]="false">
<strong>Warning!</strong> Better check yourself, you're not looking too good.
</ngb-alert>
</p>
ng-bootstrap is only adding the functionality of the features, it's not adding actual styles. What you need to do is add the Bootstrap CSS as a dependency.
I created this StackBlitz with an example. In the external resources, I added the minified CSS URL and now the correct styling shows inside the application.
https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css
My alerts won't close when I click the X button.
I've used angular cli to create a new app. I followed the instructions here to load bootstrap:
npm install bootstrap#4.0.0-alpha.6
Then I followed instructions here to load ng-bootstrap:
npm install --save #ng-bootstrap/ng-bootstrap
app.module.ts:
import { NgbModule } from '#ng-bootstrap/ng-bootstrap';
#NgModule({
declarations: [
AppComponent,
NavComponent
],
imports: [
BrowserModule,
FormsModule,
HttpModule,
NgbModule.forRoot()
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
app.component.ts
import { Component } from '#angular/core';
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'Testing...';
}
app.component.html
<app-nav></app-nav>
<ngb-alert>Alert</ngb-alert>
...
The alert shows up, and is styled properly, but it doesn't close when I click the X. Other components are working (tabset, dropdown). Am I missing something in app.component.ts?
You have to define a close event method in your component.
HTML:
<ngb-alert *ngIf="!closed" (close)="closed=true">Alert</ngb-alert>
Component:
import { Component } from '#angular/core';
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'Testing...';
closed = false;
}
I hope this will help you.
This is very late but might help others looking for a simple closeable alert. This component wraps Devansh's solution:
import { Component, Input } from '#angular/core';
#Component({
selector: 'app-alert',
template: '<ngb-alert [type]="type" *ngIf="open" (close)="open=false"><ng-content></ng-content></ngb-alert>',
})
export class InfoPanelComponent {
public open = true;
#Input() type = 'info';
}
usage:
<app-alert>I'm a closeable alert!</app-alert>
I am starting to learn angular2 and I want to have a header with a picture on it.
Here is my heading.component.html
<div class="heading">
<img src="../images/header.jpg"/>
</div>
Here is my heading.component.ts
import {Component} from 'angular2/core';
#Component({
selector: 'header',
templateUrl: './heading.component.html',
styleUrls: ['../style.css']
})
export class HeadingComponent { }
and here is my app.component.ts
import {Component} from 'angular2/core';
import {HeadingComponent} from './heading.component';
#Component({
selector: 'my-app',
template: `
<header>fgsdgf</header>
`,
styleUrls: ['../style.css']
})
export class AppComponent { }
There is nothing shown in the browser. Can you give me an idea on how can I show the image? Thanks
change your app.component.ts with this code :-
import {Component} from 'angular2/core';
import {HeadingComponent} from './heading.component';
#Component({
selector: 'my-app',
template: `
<header>fgsdgf</header>
`,
styleUrls: ['../style.css'],
directives: [HeadingComponent]
})
export class AppComponent { }
you need to add the header in the directives list before using it. so add this in the list of directives of your component.
I have this component definition in typescript:
import {Component, ViewEncapsulation} from 'angular2/core';
#Component({
selector: 'my-app',
templateUrl: '/views/sandbox.html',
styleUrls: ['/styles/sandbox.css'],
styles: [`.wow { background-color: red; }`],
encapsulation: ViewEncapsulation.Emulated
})
export class SandBox { }
According to this article: http://blog.thoughtram.io/angular/2015/06/25/styling-angular-2-components.html
both the style in the styles section and in the external stylesheet should be inlined into the header by angular.
Unfortunately, the second does not get injected, angular injects only the one in the styles section.
I have tried accessing /styles/sandbox.css from browser, it is fine. Angular is also able to access /views/sandbox.html so i have no idea why it is not happening.
I am using: "angular2": "2.0.0-beta.2" (latest beta AFAIK)
I made some tests and strangely styles from the sandbox.css only applies if you use a relative paths within the styleUrls attribute:
#Component({
selector: 'my-app',
templateUrl: '/views/sandbox.html',
styleUrls: ['../styles/sandbox.css'],
styles: [`.wow { background-color: red; }`],
encapsulation: ViewEncapsulation.Emulated
})
export class AppComponent {
constructor() {
}
}
Edit
After having a look at the source code, Angular2 prevents from using absolute path for the styleUrls. See this line:
https://github.com/angular/angular/blob/master/modules/angular2/src/compiler/style_url_resolver.ts#L12
export function isStyleUrlResolvable(url: string): boolean {
if (isBlank(url) || url.length === 0 || url[0] == '/') return false; // <-----
var schemeMatch = RegExpWrapper.firstMatch(_urlWithSchemaRe, url);
return isBlank(schemeMatch) || schemeMatch[1] == 'package' || schemeMatch[1] == 'asset';
}
Hope it helps you,
Thierry
The Best way to fix this is use another css file for your component and add it to your StyleUrls list. Cleaner and will scale as you components grow.
You can use systemjs and commonjs module dependencies loader, to load templates, styles and other files.
in commonjs moduleId : module.id
in systemJs __moduleName
import {Component} from '#angular/core';
#Component({
moduleId:module.id,
selector: "exf-header",
templateUrl: "header.html",
styleUrls:['header.css']
})
export class HeaderComponent {
}