angular4

I'm trying to write a test that asserts on Angular's ngModel attribute. At this point, I can easily test the label. However, I am not able to select the value from ngModel Question What is the best way to get the value from ngModel ? HTML: <div name="customerName"> <label>Customer Name: </label> <div> <input type="text" class="form-control" [ngModel]="customer.name" asInline disabled /> </div> </div> Test it('bindings', () => { fixture = TestBed.createComponent(CustomerComponent); fixture.detectChanges(); // this works expect(fixture.debugElement.nativeElement.querySelector('[name=customerName

I'm using angular.io quickstart seed: https://angular.io/docs/ts/latest/guide/setup.html I'm using Angular4 with typescript JIT Currently I would like to add lodash so I can use this in my component and then do an npm run build e.g. tsc -p src/" and not get any errors My component: import { Component } from '@angular/core'; import * as _ from 'lodash'; @Component({ moduleId: module.id, selector: 'HomeComponent', templateUrl: 'home.component.html' }) export class HomeComponent { constructor() { console.log(_.last([1, 2, 3])); console.log('hello'); } } My systemjs.config: /** * System

At my angular 4 application is the ngbDropdown-Element from ng-bootstrap not working. I have installed the following npm modules for this case: "@ng-bootstrap/ng-bootstrap": "^1.0.0-alpha.22", "bootstrap": "4.0.0-alpha.6", "bootstrap-sass": "^3.3.7", My app.module.ts is looking like this: import { BrowserModule } from "@angular/platform-browser" import { NgModule } from "@angular/core"; import { FormsModule } from "@angular/forms"; import { HttpModule } from "@angular/http"; import { AppComponent } from "./app.component"; import { FileitHeaderComponent } from "./fileit-header/fileit-header

I have this project https://github.com/damirkusar/AngularMeetsNetCore/tree/AngularRc4 with Angular 4 RC.4 and .net core. I updated it from Beta 8, removed universal stuff. I works without pre-rendering, but not with pre-rendering enabled. If you enable pre-rendering in this project under: WebApp/Views/Home/Index.cshtml by adding this to the app element asp-prerender-module="ClientApp/dist/main-server" so that the whole thing looks like this: <app asp-prerender-module="ClientApp/dist/main-server"> <div class='custom-modal' style="background: white"> <div class="loader absolut-center"></div> <

I'm getting this warning: The <template> element is deprecated. Use <ng-template> instead (" [attr.tabIndex]="-1" [ngClass]="{'k-item': true}"> [WARNING ->]<template *ngIf="template" [templateContext]="{ when using angular 4, is this being taken care of for the release version? thanks You need to take care of that. You need to modify your code and change all occurences of <template> to <ng-template> <template> caused conflicts with other usages of the <template> tag, therefore the Angular team changed it to use <ng-template> for Angular purposes. It's a breaking change, therefore they didn't

There are some custom elements and attributes in component template (in this example they are used by third-party non-Angular code): <foo></foo> <div data-bar="{{ bar }}"></div> They cause a compiler error: Template parse errors: 'foo' is not a known element: 1. If 'foo' is an Angular component, then verify that it is part of this module. 2. If 'foo' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. (" [ERROR ->]<foo></foo> <div data-bar="{{ bar }}"></div> "): App@1:4 Can't bind to 'bar' since it isn't a known property

I see many posts in how to set autofocus on an input filed in angularjs by creating a directive or HTML autofocus, Is there a quick and easy way to set focus in angular (angular 2, angular 4 etc) In your html add #nameit to get its reference in component code. <input type="text" name="me" #nameit> Then apply auto fouces into it. @ViewChild('nameit') private elementRef: ElementRef; public ngAfterViewInit(): void { this.elementRef.nativeElement.focus(); } Aniruddha Das' answer works well in some cases. However, if this is applied to a template-based form with required validation, you may get the

Is the AOT Compilation the default on angular@4.0.0 and angular/cli@1.0.0 ? We are migrating our apps today, and i don't know wheter its docs are still valid: https://angular.io/docs/ts/latest/cookbook/aot-compiler.html I'm having some issues that appears with AoT Compilations errors like that: Property 'myModel' is private and only accessible within class 'MyComponent'. ps.: It's error only appears with ng build -target=production I think wich this kind of error should not occurs on JIT Compilation... Since @angular/cli@1.0.0-beta.28 they've made the AOT compilation the default for production