I built an Angular 2 Component:
import {Component, View} from 'angular2/core';
#Component({
selector: 'sidemenu'
})
#View({
templateUrl: 'build/pages/menu/menu.html',
})
export class Menu {
}
in a Page component, I can't use it in the template:
import {Menu} from '../menu/menu';
#Page({
templateUrl: 'build/pages/content/content.html'
})
export class PO {
}
content.html:
<ion-content>
<sidemenu></sidemenu>
</ion-content>
isn't replaced by the Menu component's "html" (build/pages/menu/menu.html). But if I use dynamicComponentLoader to load the component inside an element from the DOM, it works (I did this to check if the component is ok).
Am I missing something?
directives: [Menu]
import {Menu} from '../menu/menu';
#Page({
templateUrl: 'build/pages/content/content.html',
directives: [Menu]
})
export class PO {
}
I don't know Ionic but usually in Angular2 you need to list components you use in the template in the #Component({ ..., directives: [Menu], ...}){ ...}
Related
I have created a component called Parent and Child. I want to display all the UI of ChildComponent to my ParentComponent.
child.component.ts
import { Component, OnInit } from '#angular/core';
#Component({
selector: 'app-child',
templateUrl: './child.component.html',
styleUrls: ['./child.component.scss']
})
export class ChildComponent implements OnInit {
testContent = 'child component content...';
constructor() { }
ngOnInit() {
}
}
child.component.html
<p>{{testContent}}</p>
parent.component.ts
import { Component, OnInit } from '#angular/core';
#Component({
selector: 'app-admin',
templateUrl: './admin.component.html',
styleUrls: ['./admin.component.scss'],
directives: [ChildComponent]
})
export class AdminComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}
parent.component.html
<div>
Lorem ipsum
<app-child></app-child>
</div>
I want to display the contents of child component inside parent component. However, I am encountering an error in Angular 4
"Object literal may only specify known properties, and 'directives'
does not exist in type 'Component'."
Do you have any idea what is the alternative property to add child component?
Remove directives from the parent component and add the child component to the module declarations array where the parent component lives.
Directives and pipes in #component are deprecated since angular RC6. Just remove it from the component.
#Component({
selector: 'app-admin',
templateUrl: './admin.component.html',
styleUrls: ['./admin.component.scss']
})
I am trying to implement a basic shopping list, but my ngFor in Angular is not working.
import { Component, View } from 'angular2/angular2';
#Component({
selector: 'my-app'
})
#View({
template: '<h1>{{title}}</h1><ul><li *ngFor="let i of items"><span>{{i}}</span></li></ul>'
})
export default class MyAppComponent {
title = 'ShoppinList';
items = ['Milk','Ham','Eggs'];
}
The only thing that appears is "loading..." and I am getting more than 10 cryptic errors.
Without trying it first I noticed an error in the import statement at the top. Should be:
import { Component } from '#angular/core'
#View() was removed almost a year ago. If you see examples that use it, just move the content to the #Component() decorator while directives and pipes were moved from #Component() to #NgModule()s declaration.
You need to add CommonModule to #NgModule({ imports: [CommonModule], ...}) export class SomeModule{} in every module where you want to use ngFor (or other directives shippled with Angular - BrowserModule already includes CommonModule).
its good way to use ngIf and use your template inside your component properties.
import { Component, View } from 'angular2/angular2';
#Component({
selector: 'my-app',
template : '<div>
<h1>{{title}}</h1>
<ul *ngIf="items">
<li *ngFor="let i of items"><span>{{i}}</span></li>
</ul>
</div>'
})
export default class MyAppComponent {
title : string = 'ShoppinList';
items : Array<string> = ['Milk','Ham','Eggs'];
}
You don't have to use #View here.
#Component({
selector: 'my-app',
template: `
<div>
{{title}}
<ul><li *ngFor="let i of items"><span>{{i}}</span></li></ul>
</div>
`,
})
export class App {
title = 'ShoppinList';
items = ['Milk','Ham','Eggs'];
}
Working plunker
I am trying to do a simple routing from a child component to another child component of a parent component. router-outlet is defined in parent component. Here is how I am trying to achieve this:
parent.ts
import {Component} from 'angular2/core';
import {RouteConfig,ROUTER_PROVIDERS,ROUTER_DIRECTIVES} from 'angular2/router';
import {bootstrap} from 'angular2/platform/browser';
import {FirstChildCmp} from "./first_child";
import {SecondChildCmp} from "./second_child";
#Component({
selector: 'app',
template: `
<router-outlet></router-outlet>
`,
directives: [ROUTER_DIRECTIVES]
})
#RouteConfig([
{path: '/first_child', component: FirstChildCmp, name: 'FirstChild', useAsDefault:true},
{path: '/second_child',component: SecondChildCmp, name:'SecondChild'}
])
export class ParentCmp{}
bootstrap(ParentCmp,[
ROUTER_PROVIDERS
]);
first_child.ts
import {Component} from 'angular2/core';
import {ROUTER_DIRECTIVES} from 'angular2/router';
#Component({
selector: 'child',
template: `
<a [routerLink]="[SecondChild]">Go to second child</a>
`,
directives: [ROUTER_DIRECTIVES]
})
export class FirstChildCmp{}
second_child.ts
import {Component} from 'angular2/core';
#Component({
selector: 'child',
template: `
This is second child.
`
})
export class SecondChildCmp{}
When the user clicks Go to second child I want to show the template of second child component. But I am getting the following error:
Component "FirstChildCmp" has no route config.
But I don't want to define configuration in FirstChildCmp instead I want to use parent's configuration. I have re-produced the problem on plunker here
FirstChild.ts Plnkr
#Component({
selector: 'child',
template: `
<a [routerLink]="['SecondChild']">Go to second child</a>
`,
directives: [ROUTER_DIRECTIVES]
})
export class FirstChildCmp{}
In ['SecondChild'] you missed quotes. It has to be a string.
Creating a basic directive is simple:
import {Component} from 'angular2/core';
#Component({
selector: 'my-component',
template: '<div>Hello!</div>'
})
export class MyComponent {
constructor() {
}
}
This works as expected. However, if I want to use Ionic components in my directive things blow up.
import {Component} from 'angular2/core';
#Component({
selector: 'my-component',
template: '<ion-list><ion-item>I am an item</ion-item></ion-list>'
})
export class MyComponent {
constructor() {
}
}
The directive is rendered, but Ionic components are not transformed, and so wont look/work properly.
I can't find any examples on this. How should I do this?
Found the answer here:
You have to import the Ionic components and register them as
'directives'
So my second example becomes:
import {Component} from 'angular2/core';
import {List, Item} from 'ionic/ionic';
#Component({
selector: 'my-component',
directives: [List, Item],
template: '<ion-list><ion-item>I am an item</ion-item></ion-list>'
})
export class MyComponent {
constructor() {
}
}
Is it possible to switch pages without having to click a [router-link]="" html element?
EDIT: Updated code which is Working
import {Component, View} from 'angular2/angular2';
import {Router} from 'angular2/router';
#Component({
selector: 'menu'
})
#View({
templateUrl: '/views/menu.html',
directives: []
})
export class Menu {
constructor(public router: Router) {
}
navigate() { // Called by (click)= on element in .html
this.router.navigate(['/Net_int_config']);
}
}