We Keep Coding

#Input variables inside UI components return null

Hint: Im very new to angular. I hope this question gets answered, as its the most detailed explanation of my issue I can give with my current knowledge/vocabulary in Angular.
I have the following Setup:
My App component defines a PageNavigation array and fills it in the constructor:
PageNavigation Interface
import {Route} from "#angular/router";
export interface PageNavigation {
displayName : string;
route : Route;
}
App Component
import {Component} from '#angular/core';
import {Router} from "#angular/router";
import {PageNavigation} from "src/app/navigation/page-navigation";
import {TemplatesComponent} from "src/app/pages/templates/templates.component";
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.less']
})
export class AppComponent {
pageNavigations: PageNavigation[];
constructor(public router: Router) {
this.pageNavigations = [
{displayName: "Templates", route: {path: "templates", component: TemplatesComponent}}
]
this.pageNavigations.forEach(pageNavigation => { //<-- I use the Array for Routing but that's probably not interesting for my problem
this.router.config.push(pageNavigation.route);
});
}
}
I then want to create a Sidebar inside my App Component, and hand over the array
SideBar Component
import {Component, Input, OnInit} from '#angular/core';
import {PageNavigation} from "src/app/navigation/page-navigation";
import {Router} from "#angular/router";
#Component({
selector: 'tara-sidebar',
templateUrl: './sidebar.component.html',
styleUrls: ['./sidebar.component.less']
})
export class SidebarComponent {
public selectedRoute?: any;
constructor(public router : Router) { }
#Input('pageNavigations') pageNavigations : PageNavigation[] | any;
navigate(): void {
alert(this.selectedRoute);
// this.router.navigate([this.selectedRoute]).then(function () {
// // success
// }, function () {
// // error
// });
}
}
The corresponding html:
app.component.html
<tara-sidebar [pageNavigations]="pageNavigations"></tara-sidebar>
<router-outlet></router-outlet>
In the app.component.html I just "hand" the values over
sidebar.component.html
<p-listbox [options]="pageNavigations" [(ngModel)]="selectedRoute" optionLabel="displayName" optionValue="route" (ngModelChange)="navigate()" ></p-listbox>
In the SideBar, I create a prime-ng listbox. It displays the correct Label (in my case "Templates"). However, clicking on it, triggering the navigate() method, I get an alert with either "null" or "[object] [object]" (it alternates between the two, meaning first click = null, second = [object] [object], third = null,...
If possible, can you please explain me whats going on, as I expected to either always get null (with Input beeing "triggered" after the navigate()), or the code to just be working and giving me the data I have clicked on.
Clicked on Templates first time
Clicked on Templates secondtime
I have already tried changing the variable type of selectedRoute from any to PageNavigation, but without success it just was giving me undefined in the alert.

This is can happen because an alert gets the old value of selectedRoute. Try to do this:
navigate(value): void {
alert(value);
}
and inside a template:
(ngModelChange)="navigate($event)"

As the returned type of the listbox wasnt PageNavigation but route, when I used alert(value.path) I was presented with a value. However, it still works only once and after that returns null and throwing an error...

Angular functions are performed twice when called in the html file

I tried to start an angular project, I've created a simple component and started a console.log in it but I have Confusing problem. when I calling a function in html file from ts file its run twice
TS:
import { Component, OnInit } from '#angular/core';
#Component({
selector: 'app-hello',
templateUrl: './hello.component.html',
styleUrls: ['./hello.component.less']
})
export class HelloComponent implements OnInit {
constructor() { }
ngOnInit(): void {
}
log(val)
{
console.log(val);
}
test() {
let time = new Date()
console.log(time.getSeconds());
}
}
html :
hello works!
{{log('test')}}
{{test()}}
image log:
enter image description here

Where and how often do you call your component?
Can you produce a simple example on stackblitz?
Without any further info, we can just guess what it is.
You propably have called your component via '' twice.
Each instance will call all your template and hence its calling functions.

Integrate xterm.js to Angular

I'm new to Angular.
I'm trying to use xterm.js (https://xtermjs.org/) but it display badly.
Here is the render :
Render
I created a xterm component. The xterm.component.ts file code is :
import { Component, OnInit } from '#angular/core';
import { Terminal } from "xterm";
#Component({
selector: 'app-xterm',
templateUrl: './xterm.component.html',
styleUrls: ['./xterm.component.css'],
})
export class XtermComponent implements OnInit {
public term: Terminal;
container: HTMLElement;
constructor() { }
ngOnInit() {
this.term = new Terminal();
this.container = document.getElementById('terminal');
this.term.open(this.container);
this.term.writeln('Welcome to xterm.js');
}
}
My xterm.component.html only contains this :
<div id="terminal"></div>
I don't really know what to do more ...
Thanks in advance guys

You must set the component encapsulation
#Component({
encapsulation: ViewEncapsulation.None,
...
})

Encountered the same problem and found this page.
Maybe this is too late for the OP, but could be useful for others.
The styles are wrong because 1) the xterm.css is not loaded, and 2) the encapsulation.
My solution to 1) was to add #import 'xterm/dist/xterm.css'; in the scss file for this component.
And 2) can be solved by setting encapsulation: ViewEncapsulation.None as Victor96's answer, or better setting encapsulation: ViewEncapsulation.ShadowDom.
Hope this helps.

I know this is old, but I had to put terminal initialation in ngAfterViewInit. Otherwise the DOM elements are undefined.

Try to use in template reference variable by using the hash symbol
<div #myTerminal></div>
and in component
#ViewChild('myTerminal') terminalDiv: ElementRef;
In ngOnInit
ngOnInit() {
this.term = new Terminal();
this.term.open(this.terminalDiv.nativeElement);
this.term.writeln('Welcome to xterm.js');
}

Angular 2 with TypeScript and Input decorator generate bad javascript ids

Hello guys,
I'm learning angular2 with Typescript and developing a new example I found some weird behaviour that maybe you can explain.
TypeScript Version:
1.8.10
Angular Version:
2.0.0-rc.1
Code
When I'm adding the #Input to a field, the generated js has errors in the generated ids:
This is the Typescript class I'm working on:
import { Component, Input, OnInit } from '#angular/core';
import { Event } from '../../model/event';
import { EventService } from '../../services/event-service';
#Component({
selector: "event-detail",
templateUrl: "event-detail.html",
providers: [EventService],
moduleId: module.id
})
export class EventDetailComponent {
#Input()
event: Event;
eventTypes : string[];
constructor(private service: EventService){
}
ngOnInit(){
this.loadEventTypes();
}
save(){
this.service.create(this.event).then(
event => this.event = event
);
}
cancel(){
this.event = null;
}
loadEventTypes(){
let response = this.service.listEventTypes()
.then(eventTypes => this.eventTypes = eventTypes);
}
}
And this is the error:
The following javascript code generated by the compiler is throwing the error because the event_1 doesn't exist.
__decorate([
core_1.Input(),
__metadata('design:type', event_1.Event)
], EventDetailComponent.prototype, "event", void 0);
Do you know what could be happen? Could a configuration be in conflict?

It looks like you did not load '../../model/event' module (perhaps it contains error, wrong path etc.).

Typescript import from .d.ts file

I wrote a (at this point) simple components for angular2.
Here's my code so far:
import {Component, View} from 'angular2/angular2';
export module SkApp.Core{
#Component({
selector: 'sk-app-side-menu'
})
#View({
template: `
<p>Hello</p>
`
})
export class SkAppSideMenu {
menuActive: boolean;
constructor(){
this.menuActive = false;
}
showMenu(){
this.menuActive = !this.menuActive;
}
}
}
Of course there's no real functionality at this point. But that's not the point right now.
I also created my own build process with gulp. Here's the relevant part of it:
gulp.task('script', ['clean'], function() {
var tsResult = tsProject.src()
.pipe(ts(tsProject));
return merge([
tsResult.dts.pipe(rename({dirname: ''}))
.pipe(concat('sk-app.d.ts'))
.pipe(gulp.dest('dist/')),
tsResult.js
.pipe(rename({dirname: ''}))
.pipe(concat('sk-app.min.js'))
.pipe(uglify())
.pipe(gulp.dest('dist/'))
]);
});
At the end I get two files: sk-app.min.js and sk-app.d.ts
sk-app.min.js:
var __decorate=this&&this.__decorate||function(t,e,n,r){if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)return Reflect.decorate(t,e,n,r);switch(arguments.length){case 2:return t.reduceRight(function(t,e){return e&&e(t)||t},e);case 3:return t.reduceRight(function(t,r){return void(r&&r(e,n))},void 0);case 4:return t.reduceRight(function(t,r){return r&&r(e,n,t)||t},r)}},__metadata=this&&this.__metadata||function(t,e){return"object"==typeof Reflect&&"function"==typeof Reflect.metadata?Reflect.metadata(t,e):void 0},angular2_1=require("angular2/angular2"),SkApp;!function(t){var e;!function(t){var e=function(){function t(){}return t.prototype.showMenu=function(t){},t=__decorate([angular2_1.Component({selector:"sk-app"}),angular2_1.View({template:'\n <button (click)="showMenu()">click me!</button>\n\n <ng-content></ng-content>\n ',directives:[angular2_1.NgClass]}),__metadata("design:paramtypes",[])],t)}();t.SkApp=e}(e=t.Core||(t.Core={}))}(SkApp=exports.SkApp||(exports.SkApp={}));
sk-app.d.ts:
export declare module SkApp.Core {
class SkApp {
showMenu(x: string): void;
}
}
Now I want to use this component within another angular2 project:
import {Component, View, bootstrap} from 'angular2/angular2';
import {SkApp} from "SkApp/Core";
#Component({
selector: 'my-app'
})
#View({
template: '<sk-app></sk-app>',
directives: [SkApp]
})
class MyAppComponent {
}
bootstrap(MyAppComponent);
But when I try to compile this project to js the typescript compiler gives me this message:
error TS2307: Cannot find module 'SkApp/Core'
When I change the module-definition within my sk-app.d.ts file to:
declare module "SkApp/Core" {
it works fine. But I want to have my definition files to be generated by gulp without having to change the module declaration myself.
Any help with this would be appreciated.
(Of course I am aware, that angular2 is still in alpha state)

export module SkApp.Core{
I think it should be:
module SkApp.Core {...
Since for what I know, Typescript doesn't have module level visibility modifiers