I tried to create a angular2 application that loads two components.
The first component called app works fine.
but the second component don't (called app-second).
index.html code
<h1>Demo of Angular 2 using ASP.NET 5 with Visual Studio 2015</h1>
<app>Loading...</app>
<br />
<app-second>Loading...</app-second>
app.ts code
import {Component} from 'angular2/core';
#Component({
selector: 'app',
template: 'My First Angular 2 App'
})
export class AppComponent {}
app-second.ts code
import {Component} from 'angular2/core';
#Component({
selector: 'app-second',
template: 'My First Angular 2 App'
})
export class AppSecondComponent{}
A Snapshot:
Can anybody tell me what is the error here?
Thanx.
You need to bootstrap your second app too.
//Importing bootstrap to instantiate your app
import {bootstrap} from 'angular2/platform/browser'
//importing the components you need to load
import {AppComponent} from './app/app'
import {AppSecondComponent} from './app/app-second'
//instantiating the components
bootstrap(AppComponent);
bootstrap(AppSecondComponent);
hope this helps.
You need to bootstrap both components
bootstrap(AppComponent, ...);
bootstrap(AppSecondComponent, ...);
Related
want to add class to font picker react. I tried with simple using class but it was not added.
version "font-picker-react": "^3.4.1",
import React from "react";
import FontPicker from "font-picker-react";
<FontPicker
apiKey="AIzaSyCrAmkqacuiyammyv400dq-l6QUNZkoMSE"
activeFontFamily={this.state.activeFontFamily}
onChange={(nextFont) =>
this.setState({
activeFontFamily: nextFont.family
})
}
/>
I am very new to Angular. In my Angular app I have a navbar folder in src/app/components/navbar and my navbar.component.ts file looks like this:
navbar.component.ts
#Component({
selector: 'app-navbar',
templateUrl: './navbar.component.html',
styleUrls: ['./navbar.component.scss']
})
export class NavbarComponent implements OnInit {
constructor() { }
ngOnInit() {
}
navbar.component.html
<p>nav bar is working</p>
index.html
<app-navbar></app-navbar>
but when I run localhost server it is not displaying nav bar is working in my index.html. how can I fix this?
You should use your component in app.component.html page like this -
<app-navbar></app-navbar>
Not in index.html because this is not your bootstrap component.
you always use <app-root></app-root> component in index.html file because this is the component which bootstraped in main module like this -
bootstrap: [AppComponent]
import navbar in app-module.ts and put the balise <app-navbar></app-navbar> in app.component.html
I can't work out why Angular will not allow me to reference my components selector. I have a page which when you click on a list item the page should bring up another templates html. This is my code.
The error I keep receiving is 'message-component' is not a known element:
1. If 'message-component' is an Angular component, then verify that it is part of this module.
2. If 'message-component' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '#NgModule.schemas' of this component to suppress this message.
Messages.component.html
<div id="Case" class="w3-container city" style="display:none">
<h2>Case</h2>
<message-case> </message-case>
</div>
I don't understand why it is giving me this error when the Message Component is declared and imported in both the NgModule and within the component.
Messages.Module.ts
#NgModule
({
imports: [SharedModule],
declarations: [
MessagesComponent,
MessageCaseComponent,
MessagesFilterPipe,
CreateMessageComponent,
],
})
Finally this is the file I am trying to display using the components selector
import { Component, OnInit } from '#angular/core';
import { IMessage } from './message';
import { ActivatedRoute, Router, Params } from '#angular/router';
import {MessagesComponent} from './messages.component';
import {CreateMessageComponent} from './createmessage.component';
#Component
({
moduleId: module.id,
selector: 'message-case',
templateUrl: 'message-case.html'
})
All help would be appreciated! I'm seemingly at a dead end right now.
Firstable the name file is wrong you putted this filename in the description
"Messages.component.html"
And the path of the template must contains "./" if it is in the same folder if it is in another folder you must put the relative path folder/file
#Component
({
moduleId: module.id,
selector: 'message-case',
templateUrl: './Messages.component.html'
})
I am trying to create an application that has two bottom navigation tabs, and each one will be a different component
This is my code:
import {Page} from 'ionic-angular';
import {Component} from 'angular2/core';
import {ckAutoLoanCalculator} from '../../components/ckAutoLoanCalculator/ckAutoLoanCalculator';
#Page({
template: `<ion-navbar *navbar class="contact_navbar">
<ion-title>Loan calculator</ion-title>
</ion-navbar>
<ion-content><ck-auto-loan-calculator></ck-auto-loan-calculator></ion-content>`,
})
class CompareRates {}
#Page({
templateUrl: 'build/pages/home/home.html',
directives: [ckAutoLoanCalculator],
})
export class Home {
loan_calculator: any;
compare_rates: any;
constructor() {
this.loan_calculator = LoanCalculator;
this.compare_rates = CompareRates;
}
}
As you can see, I am trying to load ck-auto-loan-calculator component when clicking on the Loan calculator tab .. but it does not load the content, although I can see <ck-auto-loan-calculator> inside the content
Do I need to trigger something, or ?
It looks like you are missing the import for your custom tab component.
In Angular2, to pass the class reference to the directives property, you need to make it available in that files 'variable scope'
import {ckAutoLoanCalculator} from './path/to/component'
I would include the ckAutoLoanCalculator class into the page that actually uses it, in your case the CompareRates one:
#Page({
template: `
<ion-navbar *navbar class="contact_navbar">
<ion-title>Loan calculator</ion-title>
</ion-navbar>
<ion-content>
<ck-auto-loan-calculator></ck-auto-loan-calculator>
</ion-content>
`,
directives: [ckAutoLoanCalculator]
})
class CompareRates {}
and not the Home one.
It was actually export class CompareRates {} what I needed
I can't seem to get the data in this.heroes to display on the list. I put an alert(this.heroes[0].name); and it did display the data so this._service.getHeroes(); is returning the data
app.html
<div style="width:1000px;margin:auto">
<ul>
<li *ngFor="#hero of heroes">
<span>{{hero.name}}</span>
</li>
</ul>
</div>
app.component.ts
import {Component} from 'angular2/core';
import {RouteConfig, ROUTER_DIRECTIVES} from 'angular2/router';
import {HeroService} from './heroes/hero.service';
import {Hero} from './heroes/hero';
#Component({
selector: 'my-app',
templateUrl: 'templates/app.html',
providers: [HeroService],
directives: [ROUTER_DIRECTIVES]
})
export class AppComponent {
heroes: Hero[];
constructor(private _service: HeroService) { }
ngOnInit() {
this.heroes = this._service.getHeroes();
}
}
Try this first and see if it works:
<li ng-repeat="hero in heroes">
{{hero.name}}
</li>
If this works you might have an older angular version that does not support the *ngFor syntax yet (I think this is supported in the new version angular 2).
I've done a little more research and no data is displaying. For example:
<h2>My favorite hero is {{ myHero }}</h2>
gets a blank line (where myHero is a populated string) whereas
<h2>My favorite hero is </h2>
displays
My favourite hero is
I'm going to change the Beta version of Angular 2 to see if it helps