So in my angular 2 app I have:
//app.component.ts
import { Component } from '#angular/core';
import { sidebarComponent } from './sidebar/sidebar.component';
#Component({
selector: 'my-app',
template: `<sidebar></sidebar>
<h1>helps</h1>`,
providers: [sidebarComponent]
})
export class AppComponent { }
and
//sidebar.component.ts
import { Component } from '#angular/core';
#Component({
selector: 'sidebar',
template: `<h1>sidebar</h1>`
})
export class sidebarComponent { }
When I load my app and app.component is displayed, I get <sidebar></sidebar><h1>helps</h1> rendered directly (in the page source), but no <h1>sidebar</h1>. What have I missed here?
What have I missed here? Directives :-)
import { Component } from '#angular/core';
import { sidebarComponent } from './sidebar/sidebar.component';
#Component({
selector: 'my-app',
template: `<sidebar></sidebar>
<h1>helps</h1>`,
directives: [sidebarComponent]
})
export class AppComponent { }
use directives:[sidebarComponent] instead of providers: [sidebarComponent]
Related
I am not able to render component header in my application. I don't get any error also. In browser, It shows the header tag also but text present in header.component.html is not shown.
app.modules.ts
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { FormsModule } from '#angular/forms';
import { AppComponent } from './app.component';
import { HeaderComponent } from './header/header.component';
#NgModule({
imports: [ BrowserModule, FormsModule ],
bootstrap: [ AppComponent ],
declarations: [HeaderComponent]
})
export class AppModule { }
app.component.ts
import { Component } from '#angular/core';
#Component({
selector: 'project',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
name = 'Project';
}
app.component.html
<header></header>
<p>
Hello World
</p>
header.component.ts
import { Component, OnInit } from '#angular/core';
#Component({
selector: 'header',
templateUrl: './header.component.html',
styleUrls: ['./header.component.css']
})
export class HeaderComponent{
}
Please help me. :'(
I try use this component in angular 4
https://github.com/jellyjs/angular2-file-drop
I have something like this
import { Component, OnInit } from '#angular/core';
import { FileDropDirective } from 'angular2-file-drop';
#Component({
selector: 'app-drag-and-drop',
template: `
<div fileDrop
[ngClass]="{'file-is-over': fileIsOver}"
[options]="options"
(fileOver)="fileOver($event)"
(onFileDrop)="onFileDrop($event)">
Drop file here
</div>
`,
directives: [ FileDropDirective ],
styleUrls: ['./drag-and-drop.component.scss']
})
export class DragAndDropComponent implements OnInit {
}
I have error that import FileDropDirective from path has no exported member 'FileDropDirective' and also error in line directives: [ FileDropDirective ],
that Object literal may only specify known properties, and 'directives' does not exist in type 'Component'.
I change
import { FileDropDirective } from 'angular2-file-drop;
to
import { FileDropModule } from 'angular2-file-drop;
and also
directives to providers and working fine
I have been trying to make a simple app in Angular, I was able to make it work in Plunker. Unfortunately, it gives me this error
Can't bind to 'joke' since it isn't a known property of 'app-root'.
that I don't know how to handle.
What is the problem?
joke.component.ts
import { Component, EventEmitter, Input, Output, OnInit } from '#angular/core';
import { Joke } from '../jokes'
#Component({
selector: 'app-joke',
templateUrl: './joke.component.html',
styleUrls: ['./joke.component.css']
})
export class JokeComponent implements OnInit {
constructor() {}
#Input("joke") joke: Joke;
#Output() jokeDeleted = new EventEmitter<Joke>();
deleteItem() {
this.jokeDeleted.emit(this.joke)
}
ngOnInit() {}
}
joke-form.component.spec
import { async, ComponentFixture, TestBed } from '#angular/core/testing';
import { JokeFormComponent } from './joke-form.component';
describe('JokeFormComponent', () => {
let component: JokeFormComponent;
let fixture: ComponentFixture<JokeFormComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ JokeFormComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(JokeFormComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should be created', () => {
expect(component).toBeTruthy();
});
});
joke-list.component
import { Component, OnInit } from '#angular/core';
import {Joke} from '../jokes';
#Component({
selector: 'app-joke-list',
templateUrl: './joke-list.component.html',
styleUrls: ['./joke-list.component.css']
})
export class JokeListComponent implements OnInit{
jokes: Joke[];
constructor() {
this.jokes = [
new Joke("I am telling a joke.", "Haha, that's funny!"),
new Joke("I am telling an even funnier joke.", "Hahahahaha!!"),
new Joke("I am telling the funniest joke.", "HAHAHAHAHAHA!!!!")
]
}
addJoke(joke) {
this.jokes.unshift(joke);
}
deleteJoke(joke) {
let indexToDelete = this.jokes.indexOf(joke)
if (indexToDelete !== -1) {
this.jokes.splice(indexToDelete, 1);
}
}
ngOnInit() {}
}
app.component
import { Component } from '#angular/core';
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {}
app.module.ts
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { FormsModule, ReactiveFormsModule } from '#angular/forms';
import { HttpModule } from '#angular/http';
import { AppComponent } from './app.component';
import { JokeFormComponent } from './joke-form/joke-form.component';
import { JokeListComponent } from './joke-list/joke-list.component';
import { JokeComponent } from './joke/joke.component';
#NgModule({
declarations: [
AppComponent,
JokeFormComponent,
JokeListComponent,
JokeComponent,
],
imports: [
BrowserModule,
FormsModule,
ReactiveFormsModule,
HttpModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
From the code you have posted I see that your AppComponent class is empty :
export class AppComponent {}
Since you haven't posted your html code, I am guessing you are doing something similar to the plunker, where my-app in plunker is equivalent to app-root in your question's code:
<app-root *ngFor="let j of jokes" [joke]="j" (jokeDeleted)="deleteJoke($event)"></app-root>
Once you add #Input("joke") joke: Joke to AppComponent class, it should not throw that error anymore:
export class AppComponent {
#Input("joke") joke: Joke;
#Output() jokeDeleted = new EventEmitter<Joke>();
deleteItem() {
this.jokeDeleted.emit(this.joke)
}
}
You can try to delete this OnInit method that angular generates for us in this child joke.component.ts class that implements this #Input method for Property binding [property]. And also restart the server.
My project structure:
app.component.ts:
import { Component } from "#angular/core"
import { Todo } from './components/shared/todo.model'
import { todos } from "./components/shared/todo.data"
import {TodoService} from "./components/shared/todoService"
import {TodoService} from "./components/shared/todoService";
#Component({
moduleId: module.id,
selector: "app",
templateUrl: "app.component.html",
styleUrls: ['app.component.css'],
providers: [TodoService]
})
export class AppComponent {
title:string = "Angular 2Do";
}
todo-form.component.ts:
import {Component, Output, EventEmitter} from "#angular/core";
import {Todo} from "../shared/todo.model";
import {TodoService} from "../shared/todoService"
#Component({
moduleId: module.id,
selector: "todo-form",
templateUrl: "todo-form.component.html",
styleUrls: ["todo-form.component.css"],
})
export class TodoForm {
...
constructor(private todoService:TodoService) {
console.log(this.todoService);
this.todoService.order = 2;
console.log( this.todoService);
}
}
todo-list.component.ts:
import {Component, Input, OnInit} from "#angular/core"
import { ITodo } from "../shared/todo.model"
import { TodoService } from "../shared/todoService"
#Component({
moduleId: module.id,
selector: "todo-list",
templateUrl: "todo-list.component.html",
styleUrls: ["todo-list.component.css"],
})
export class TodoListComponent implements OnInit {
todos:ITodo[];
...
constructor(private todoService:TodoService) {
...
console.log(this.todoService);
this.todoService.order=1;
console.log(this.todoService);
}
...
}
app is the parent of the list and form components
Whaen I start application I see in console:
but if expand all I see:
Which result actual and why in second view I see 1 and in another 2.
The console.log '+' button can only show you the current state of the object, not the object at the snapshot in time of when it was called.
See console.log() async or sync? for a more in depth explanation.
So order: 1, is the final state of the object.
never use providers( providers: [TodoService] ) in component
as
import { Component } from "#angular/core"
import { Todo } from './components/shared/todo.model'
import { todos } from "./components/shared/todo.data"
import {TodoService} from "./components/shared/todoService"
import {TodoService} from "./components/shared/todoService";
#Component({
moduleId: module.id,
selector: "app",
templateUrl: "app.component.html",
styleUrls: ['app.component.css']
})
export class AppComponent {
title:string = "Angular 2Do";
}
it makes new instance when component initialise so put providers in module only ie. NgModule
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() {
}
}