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
Related
I have created proper Ingredient object in Typesript, also proper "model" for the object. Though ngfor directive is not working. I am getting this error "NG0303: Can't bind to 'ngforOf' since it isn't a known property of 'a'" on inspecting in browser.
My model code
export class Ingredient {
constructor(public name: string, public amount: number){}
}
My TypeScript code
import { Component, OnInit } from '#angular/core';
import { Ingredient } from '../shared/ingredient.model';
#Component({
selector: 'app-shopping-list',
templateUrl: './shopping-list.component.html',
styleUrls: ['./shopping-list.component.css']
})
export class ShoppingListComponent implements OnInit {
ingredients: Ingredient[] = [
new Ingredient ("Apple", 5),
new Ingredient ("Tomato", 5)
];
constructor() { }
ngOnInit(): void {
}
}
My HTML code
<div class="row">
<div class="col-xs-10">
<app-shopping-edit></app-shopping-edit>
<hr>
<ul class = "list-group">
<a class = "list-group-item"
style = "cursor : pointer"
*ngfor = "let ingredient of ingredients">
{{ ingredient.name }}({{ ingredient.amount}})
</a>
</ul>
</div>
</div>
Page is loading properly, but ingredients are not loading. On inspecting in browser this error "NG0303: Can't bind to 'ngforOf' since it isn't a known property of 'a'" is coming.
Can someone please help.
Try moving the *ngFor inside the ul tag.
Edit: You have a typo.. It's *ngFor="", not *ngfor="".
If you are inside AppModule check if you have BroswerModule in the imports array there.
If you are in some different module then check if CommonModule is a part of that module's array. CommonModule provides us with core Angular features like *ngIf or *ngFor in your specific case.
Also watch out, you typed *ngfor instead *ngFor.
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
Anular 5: For clear structure of module i wanna make some AbstractParentComponent (that have reusable logic and template) and have possibility extend it:
#Component({
selector: 'app-parent',
template: ' //reusable header element with logic
*here we should have ability to change part of tamplate*
<ng-container *ngTemplateOutlet="customTemplate"> </ng-container>
//reusable footer element with logic
'
})
export class ParentComponent{
//logic impl
And i wanna ability create extended components that extend all parent logic but implement own part with custom template:
#Component({
selector: 'app-child',
template: '
//here i wanna extend parent template
/*something like*/ <ng-template #customTemplate>
//some template impl
</ng-template>'
})
export class ChildComponent extends ParentComponent{}
How it's possible to do ?
How about:
#Component({
selector: 'app-child',
template: '<app-parent></app-parent>'
})
export class ChildComponent extends ParentComponent{}
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 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, ...);