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.
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 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");
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 have a simple routing module, and then a template where I have links.
- The first link doesn't display as a clickable link, it shows as static text.
The second shows as link, only because of the href. Is this required?
app-routing.module.ts:
import {NgModule} from '#angular/core';
import {RouterModule, Routes} from '#angular/router';
import {AppComponent} from "./app.component";
import {ListComponent} from "./list/list.component"
const appRoutes: Routes = [
{path: 'List', component: ListComponent},
{path: 'Home', component: AppComponent}
];
#NgModule({
imports: [
RouterModule.forRoot(appRoutes)
],
exports: [
RouterModule
]
})
export class AppRoutingModule {}
app.component.ts
import { Component } from '#angular/core';
import {RouterModule} from '#angular/router';
import { AppRoutingModule } from './app-routing.module';
#Component({
moduleId: module.id,
selector: 'my-app',
templateUrl: './app.component.html'
})
export class AppComponent {
}
app.component.html
<a routerLink="/List" routerLinkActive="active">List</a> |
List
<router-outlet></router-outlet>
First of all the href is not required and the second one it should be routerLink not routerlink.
Try using lower caps in your links
Why would you need both links to point to the same thing