I am doing authentication and authorization of pages on the server side. on index pages of each controller. But inside each index page I want to use angular 2 hence I want to use angular 2 routing.
I have tried like
app.component.ts
import { Component } from '#angular/core';
#Component({
selector: 'my-app',
template:''
})
export class AppComponent {
}
app.module.ts
import {NgModule} from '#angular/core';
import {BrowserModule} from '#angular/platform-browser';
import { AppComponent } from './app.component';
import { RouterModule } from '#angular/router'
import { TestSuiteComponent } from './testsuite/testsuite.component'
//import {InputTextModule, CalendarModule, DataTable} from 'primeng/primeng';
import { DataTableModule, SharedModule } from 'primeng/primeng';
#NgModule({
imports: [BrowserModule, DataTableModule, SharedModule, RouterModule.forRoot([
{
path: 'TestSuiteEditor/Index',
component: TestSuiteComponent
},
{
path: 'Home/Index',
component: TestSuiteComponent
}
])],
declarations: [AppComponent,TestSuiteComponent],
bootstrap: [ AppComponent]
})
export class AppModule { }
on testsuite.component.ts page
import { Directive, Component, OnInit } from '#angular/core';
import {DataTableModule, SharedModule} from 'primeng/primeng';
import { TestSuite } from './testsuite';
#Component({
// moduleId: module.id,
selector: 'testsuite-header',
template: `
<div class="ui-widget-header ui-helper-clearfix" style="padding:4px 10px;border-bottom: 0 none">
<i class="fa fa-search" style="float:left;margin:4px 4px 0 0"></i>
<input #gb type="text" pInputText size="50" style="float:left" placeholder="Global Filter">
</div>
<div class="ui-datatable ui-widget">
<div class="ui-datatable-tablewrapper">
<p-dataTable [value]="testSuites" [rows]="5" [paginator]="true" [globalFilter]="gb" [editable]="true">
<p-column field="testSuiteId" header="TestSuites (startsWith)" [style]="{'width':'10%'}" [filter]="true" [editable]="true"></p-column>
<p-column field="projectId" header="ProjectId (contains)" [style]="{'width':'10%'}" [filter]="true" filterMatchMode="contains" [editable]="true"></p-column>
<p-column field="name" header="Name (startsWith)" [style]="{'width':'30%'}" [filter]="true" [editable]="true"></p-column>
<p-column field="description" header="Description (endsWith)" [style]="{'width':'40%'}" [filter]="true" filterMatchMode="endsWith" [editable]="true"></p-column>
<p-column field="isActive" header="IsActive (endsWith)" [style]="{'width':'10%'}" [filter]="true" filterMatchMode="endsWith" [editable]="true"></p-column>
</p-dataTable>
</div>
</div> `,
// providers: [TestSuiteService]
})
export class TestSuiteComponent{}
Home/Index.cshtml
<testsuite-header>Loading....</testsuite-header>
but it throwing an error of
Cannot find primary outlet to load 'TestSuiteComponent'
You have forgotten to add router-outlet in your application. You can define router-outlet in AppComponent like this-
<router-outlet></router-outlet>
So your AppComponent will looks like this-
import { Component } from '#angular/core';
#Component({
selector: 'my-app',
template:`
<!-- Routed views go here -->
<router-outlet></router-outlet>
`
})
export class AppComponent {
}
I have found the solution, thanks for your help
I have created the path similar to my MVC routing and added in routing.ts.
Since angular 2routing have feature of loading the active url so it automatically loads the component which is assign to that URL.
Related
I've been trying to get ContentChild with Directive working in a demo/example and I keep running into the directive not working. No errors being thrown. I've replicated the scenario on StackBlitz and I'm getting the same problem: https://stackblitz.com/edit/angular-contentchild-directive-etktcd
Why am I still getting "undefined" for the child input?
Here is the Directive:
import { Component, Directive, Input, ContentChild, OnInit, OnDestroy, forwardRef, AfterContentInit} from '#angular/core';
import { AbstractControl } from '#angular/forms';
import { FocusDirective } from '../directive/focus.directive';
#Component({
selector: 'field-validation',
template: `
<ng-content></ng-content>
`
})
export class FieldValidationComponent implements OnInit, AfterContentInit {
#ContentChild(FocusDirective) input: FocusDirective;
ngOnInit(): void {
console.log("ngOnInit::input is: ", this.input);
// this.input.focusChange.subscribe((focus) => {
// this.updateAttributes();
// });
}
ngAfterContentInit(): void {
console.log("ngAfterContentInit::input is: ", this.input);
}
}
Here is the child Component:
import { Component, Directive, Input, ContentChild, OnInit, OnDestroy,
forwardRef, AfterContentInit} from '#angular/core';
import { AbstractControl } from '#angular/forms';
import { FocusDirective } from '../directive/focus.directive';
#Component({
selector: 'field-validation',
template: `
<ng-content></ng-content>
`
})
export class FieldValidationComponent implements OnInit, AfterContentInit {
#ContentChild(FocusDirective) input: FocusDirective;
ngOnInit(): void {
console.log("ngOnInit::input is: ", this.input);
// this.input.focusChange.subscribe((focus) => {
// this.updateAttributes();
// });
}
ngAfterContentInit(): void {
console.log("ngAfterContentInit::input is: ", this.input);
}
}
Here is the HTML in the parent app:
<form [formGroup]="testForm">
<field-validation>
<input type="text" placeholder="0.00">
</field-validation>
<div>
<button type="submit">FAKE SUBMIT</button>
</div>
</form>
Please add the FocusDirective class to declaration property of AppModule, as shown below.
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { ReactiveFormsModule } from '#angular/forms';
import { AppComponent } from './app.component';
import { HelloComponent } from './hello.component';
import { FieldValidationComponent } from './child-component/field-validation.component';
import { RxReactiveFormsModule } from '#rxweb/reactive-form-validators'
import { FocusDirective } from './directive/focus.directive';
#NgModule({
imports: [ BrowserModule, ReactiveFormsModule, RxReactiveFormsModule],
declarations: [ AppComponent, HelloComponent, FieldValidationComponent, FocusDirective],
bootstrap: [ AppComponent ]
})
export class AppModule { }
I'm new to Angular2 and have many questions.
I have some controllers that I wrote in AngularJS that I now want to convert to Angular2 components.
I would like to pass JSON data to the component and use in the template. In AngularJS I used ng-init to do this.
I have tried initialising the component in the ASP.NET MVC view with:
<review [reviewJson]="#Newtonsoft.Json.JsonConvert.SerializeObject(Model.CustomerReviews)"></review>
The component looks like this:
import { Component, OnInit, Input } from '#angular/core';
#Component({
selector: 'review',
template: `
<div id="reviews-wrapper" class="row">
<div class="item col-sm-4 col-xs-6" *ngFor="let review of reviewJson">
<div class="review-card">
<div class="review-image"><img [src]="review.Image"/></div>
<div class="review-name">review.Name</div>
<div class="review-text">review.Text</div>
</div>
</div>
</div>
`,
providers: []
})
export class ReviewComponent implements OnInit {
#Input() reviewJson: any;
constructor() {
}
ngOnInit() {
console.log(this.reviewJson);
}
}
The app.module file where I declare the review component looks like this:
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { HttpModule } from '#angular/http';
import { ReviewComponent } from './review.component';
#NgModule({
imports: [
BrowserModule,
HttpModule
],
declarations: [
ReviewComponent
],
bootstrap: [ReviewComponent],
providers: [
]
})
export class AppModule { }
The console.log(this.reviewJson) is showing undefined when I load the page so obviously I'm doing something completely wrong.
Any help appreciated.
You cannot directly bind the MVC models into the angular template - fetch the data as JSON using service and then bind the value to it's #Input decorator
Hope this helps - happy coding :)
app.component.ts
import { Component,OnInit } from '#angular/core';
import {FormControl,FormGroup,FormArray,FormBuilder} from '#angular/forms'
#Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
name = 'Angular 6';
form=new FormGroup({
topics:new FormArray([])
})
addTopic(topic:HTMLInputElement){
(this.form.get('topics') as FormArray).push(new FormControl(topic.value));
topic.value='';
}
}
app.component.html
<form>
<input type="text" class="form-control" (keyup.enter)="this.addTopic(topic)" #topic />
<ul class="list-group">
<li class="list-group-item" *ngFor="let topic of form.get('topics').controls">
{{topic.value}}
</li>
</ul>
</form>
I have created a Multi Input Control using Angular FormArray but how can i Validate the same for Minimum 2 Items(Length=2) and only accept integer values.
How to Add Validators.minlength like Reactive Form / Model Driven Form Approach.
How can i get those items using ngModel?
I hope this helps.
import {
Component,
OnInit
} from '#angular/core';
import {
FormControl,
FormGroup,
FormArray,
FormBuilder
} from '#angular/forms'
#Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
name = 'Angular 6';
form = new FormGroup({
topics: new FormArray(this.formBuilder.control(''), [Validators.reqired, Valiadtors.minlength(2)], Validators.Paterrn("^[0-9]*$"))
])
addTopic(topic: HTMLInputElement) {
(this.form.get('topics') as FormArray).push(new FormControl(topic.value));
topic.value = '';
}
}
I've searched a while for this but I feel like this is one of the basics so no one bothers to explain it anymore...
Here's my problem.
I'm writing a component in TypeScript, which is part of an ASPNET core 2 and angular project.
TS file :
import { Component } from '#angular/core';
#Component({
selector: 'clients',
templateUrl: './clients.component.html',
styleUrls: ['./clients.component.css']
})
export class ClientsComponent{
rows: Array<any>;
constructor() {
let btn = document.getElementById("coolbutton");
if (btn === null) return;
btn.addEventListener("click", (e: Event) => this.ClickMeButton());
}
ClickMeButton() {
alert("toto");
}
}
HTML file :
<input type="button" value="Click" id="coolbutton"/>
But an error is raised when the page loads :
An unhandled exception occurred while processing the request.
NodeInvocationException: Uncaught (in promise): ReferenceError: document is
not defined
I am unable to find any explanations on how to import document in my TS componenet...
just put the (click) on the element and call your function:
import { Component } from '#angular/core';
#Component({
selector: 'clients',
templateUrl: './clients.component.html',
styleUrls: ['./clients.component.css']
})
export class ClientsComponent{
constructor() {}
public clickMeButton(): void {
alert("toto");
}
}
<input type="button" value="Click" (click)="clickMeButton()"/>
Refreshing angular2 dart page using HashLocationStrategy works fine as it opens the exact same view.
Refreshing the page using PathLocationStrategy - with tomcat server configured to serve index.html - works for the url without parameter but does not work for the url with parameter.
localhost:8090/menu1 // refresh works
localhost:8090/menu2/paramVal // does not refresh
tomcat web.xml has
<error-page>
<error-code>404</error-code>
<location>/index.html</location>
</error-page>
main.dart
main() {
bootstrap(AppComponent, [
ROUTER_PROVIDERS,
provide(APP_BASE_HREF, useValue: '/')]);
}
app_component.dart
import 'package:angular2/core.dart';
import 'package:angular2/router.dart';
import 'package:angular2/angular2.dart';
import 'package:mboxes/menu1.dart';
import 'package:mboxes/menu2.dart';
#Component(
selector: 'my-app',
templateUrl: 'app_component.html',
directives: const [ROUTER_DIRECTIVES],
providers: const[ROUTER_PROVIDERS, ])
#RouteConfig(const [
const Route(
path: '/menu1',
name: 'Menu1',
component: Menu1Component,
useAsDefault: true),
const Route(
path: '/menu2/:param', name: 'Menu2', component: Menu2Component)
])
class AppComponent {}
app_component.html
<div class="container">
<nav>
<ul>
<li>
<a [routerLink]="['Menu1']">Menu1</a>
</li>
<li> <a [routerLink]="['Menu2', {'param':'paramVal'}]">Menu2</a> </li>
</ul>
</nav>
<div style="padding-left: 200px; padding-top: 200px; padding-bottom: 50px">
<router-outlet></router-outlet>
</div>
</div>
menu1.dart
import 'package:angular2/core.dart';
import 'package:angular2/router.dart';
#Component(
selector: 'menu1',
template: ''' menu 1 was clicked '''
)
class Menu1Component {}
menu2.dart
import 'package:angular2/core.dart';
import 'package:angular2/router.dart';
#Component(
selector: 'menu2',
template: ''' menu 2 was clicked'''
)
class Menu2Component implements OnInit {
final RouteParams _routeParams;
Menu2Component(this._routeParams);
ngOnInit() {
var val = _routeParams.get('param');
print ("passed param is " + val);
}
}
Instead of using 404 to serve index.html I think you want to set up a servlet-mapping with something like <url-pattern>*</url-pattern>
See also Tomcat servlet, redirect all urls to a single webpage