Discussion for angular (2+) - need help? create a stackblitz with your issue to get help faster using this template: https://stackblitz.com/fork/angular-issue-repro2
the balanceId$ and year$ are observable, with some initial value and using form/user event events to update their value
again, reduce just as a quick example, probably needs more logic to limit the actual number :)
But also, one would often store/cache the last selected year, (or put it in the URL query param), so back/forward navigation works
emotionalplant Hei, I have an issue where my bottom toolbar isn't visibly on mobile due to the address bar cutting into the height of the page. It only appears once user scrolls to bottom and address bar disappears. How would I go about detecting when the address bar is visible and when not?
Hi all, I know it's probably not the best approach but how can I pass in 2 objects into a template? e.g.
<RadPieChart allowAnimation="true" *ngIf="balanceInfo$ | async as data">
<PieSeries
tkPieSeries
selectionMode="DataPoint"
expandRadius="0.4"
outerRadiusFactor="0.7"
valueProperty="value"
categoryProperty="caption"
legendLabel="Brand"
items="{{ ...data.currentBalance, ...data.taken }}"
>
</PieSeries>
I want an array of objects
@aubrey-fowler seems like what you want is:
[items]="[data.currentBalance, data.taken]"unless I'm missing something
You need the brackets around items so that it will evaluate the righthand side and you need the brackets around currentBalance and taken to make it an array. Not sure why you thought you needed the spread operators.
is it possible?
public getAllProducts(limit, lastSortValue): Observable<any> {
const onCallFunction = this.fns.httpsCallable('onFetchProduct');
console.log(onCallFunction({ limit, lastSortValue }));
// this.product$ = onCallFunction({ limit, lastSortValue })).pipe(
// );
return onCallFunction({ limit, lastSortValue });
}
Cypress sometimes interacts with the app too quickly and I'm looking for a way to ensure that Angular has stabilized and attached all its event handlers before the test starts clicking stuff
with Cypress it's possible to do all sorts of clever things like spying on the DOM API and what not as described here: https://www.cypress.io/blog/2018/02/05/when-can-the-test-start/
but I'm struggling to think of a way to know that my app is ready all the way down to the bottom of the component tree and that all the data has flowed to its endpoints
does anyone have any suggestions as to how to do this robustly?
decorating my root level component with a class that is applied by ngAfterViewInit was one thing I thought of trying, but the more I think about it that is a pretty weak assertion of readiness
Hi there, I wish to move some module.forRoot() inside a feature module, but I want to save the forRoot property. A practical example:
OAuthModule.forRoot({
resourceServer: {
sendAccessToken: true
}
}),the module above is possible to move in a feature module and than import the feature module in app.module?
/**
* fetch the number of products with last fetched products
*
* @param {number} limit
* @param {string} startAt
* @returns {Observable<Product>}
* @memberof StoreService
*/
public getAllProducts(limit, lastSortValue): Observable<Product[]> {
this.product$ = this.http
.post(`${environment.apiBaseUrl}/onFetchProduct`, { limit, lastSortValue })
.pipe(
shareReplay({ bufferSize: 1, refCount: true }),
catchError(error => captureException(error))
) as Observable<Product[]>;
return this.product$;
}
So in NG10, I've got three button elements separated by line breaks in source, such as:
<button />
<button />
<button />But as far as I can ascertain, Ivy renders them more like:
<button /><button /><button />which results in no single whitespace text element between these buttons. Is there something that I can configure to get this to behave more in line with what would be expected of HTML markup?
Never mind, found https://v10.angular.io/guide/angular-compiler-options#preservewhitespaces and going to test it.
Seems to do it.
where
getProducts(limit, lastSortValue) {
const queryParams = {
limit,
lastSortValue
};
this.products$ = this.http
.get(`${environment.apiBaseUrl}/onFetchProduct`, { params: queryParams })
.pipe(
shareReplay(1)
);
this.products$.subscribe(response => {
console.log(response);
this.products = this.products.concat(response.data.products);
console.log(this.products);
});
return of(this.products);
}
will
this.products$ wait so that I can return the result?
Hi!
I want to use form for add and update value. how can I do that? what should be the method for update?
currently html file code is for addition is
<form [formGroup]="form" (ngSubmit)="Create_Faculty_Accounts()" class="mb-2">
<table class="table text-center">
<tbody>
<tr>
<td>
<div class="form-group mb-2">
<label for="Name" class=" mx-sm-3">Name:</label>
<input type="text" formControlName="Name" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.Name.errors }"/>
<div *ngIf="submitted && f.Name.errors" class="invalid-feedback">
<div *ngIf="f.Name.errors.required">Name is required</div>
</div>
</div>
</td>
<td>
<div class="form-group mb-2">
<label class="mx-sm-3">Email:</label>
<input type="email" formControlName="Email" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.Email.errors }"/>
<div *ngIf="submitted && f.Email.errors" class="invalid-feedback">
<div *ngIf="f.Email.errors.required">Email is required</div>
</div>
</div>
</td>
<td><div class="form-group mb-2">
<label for="email" class=" mx-sm-3">Designation</label>
<input type="text" formControlName="Designation" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.Designation.errors }" #Designation/>
<div *ngIf="submitted && f.Designation.errors" class="invalid-feedback">
<div *ngIf="f.Designation.errors.required">Designation is required</div>
</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="form-group mb-2">
<label class="mx-sm-3">Contact:</label>
<input type="tel" formControlName="Contact" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.Contact.errors }"/>
<div *ngIf="submitted && f.Contact.errors" class="invalid-feedback">
<div *ngIf="f.Contact.errors.required">Contact is required</div>
</div>
</div>
</td>
<td>
<ng-template
*ngIf="techer();then ifShow; else ifNotShow">
</ng-template>
<ng-template #ifShow>
<div class="form-group mb-2">
<label for="sel1" class="mx-sm-3"> Subjects: </label>
<select class="form-control" formControlName="Subjects" id="sel1" [ngClass]="{ 'is-invalid': submitted && f.Subjects.errors }" >
<option *ngFor="let account of subjects" [value]="account.Sub_Title">{{ account.Sub_Title }}</option>
</select>
<div *ngIf="submitted && f.Subjects.errors" class="invalid-feedback">
<div *ngIf="f.Subjects.errors.required">Subject is required</div>
</div>
</div>
</ng-template>
<ng-template #ifNotShow>
<div class="form-group mb-2">
<label for="sel1" class="mx-sm-3"> Subjects: </label>
<input type="tel" formControlName="Subjects" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.Contact.errors }" [attr.disabled]=true [ngModel]="dflt"/>
<div *ngIf="submitted && f.Subjects.errors" class="invalid-feedback">
<div *ngIf="f.Subjects.errors.required">Subject is required</div>
</div>
</div>
</ng-template>
</td>
<td>
<div class="form-group mb-2">
<label class="mx-sm-3">Address:</label>
<input type="text" formControlName="Address" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.Address.errors }"/>
<div *ngIf="submitted && f.Address.errorts file for addition is
private Create_Faculty_Accounts() {
// console.log(this.form.value);
this.accountService
.createfaculty(this.form.value)
.pipe(first())
.subscribe({
next: () => {
this.alertService.success('Account created successfully', {
keepAfterRouteChange: true,
});
this.router.navigate(['../'], { relativeTo: this.route });
},
error: error => {
this.alertService.error(error);
this.loading = false;
}
});
}Update form html code is
table class="table table-striped">
<thead>
<tr>
<th style="width:30%">Id</th>
<th style="width:30%">Name</th>
<th style="width:30%">Email</th>
<th style="width:30%">Designation</th>
<th style="width:10%"></th>
</tr>
</thead>
<tbody>
<tr *ngFor="let fclt of faculty">
<td> {{fclt.id}} </td>
<td>{{fclt.Name}} </td>
<td>{{fclt.Email}}</td>
<td>{{fclt.Designation}}</td>
<td style="white-space: nowrap">
<!-- <a routerLink="edit/{{fclt.id}}" class="btn btn-sm btn-primary mr-1">Edit</a> -->
<button (click)="deletefaculty(fclt.id)" class="btn btn-sm btn-danger btn-delete-account" [disabled]="fclt.isDeleting">
<span *ngIf="fclt.isDeleting" class="spinner-border spinner-border-sm"></span>
<span *ngIf="!fclt.isDeleting">Delete</span>
</button>
</td>
</tr>
<tr *ngIf="!faculty">
<td colspan="4" class="text-center">
<span class="spinner-border spinner-border-lg align-center"></span>
</td>
</tr>
</tbody>
</table>i am using ts method for upate is given below
private updateFaculty() {
this.accountService.updatefaculty(this.id, this.form.value)
.pipe(first())
.subscribe({
next: () => {
this.alertService.success('Update successful', { keepAfterRouteChange: true });
this.router.navigate(['../../'], { relativeTo: this.route });
},
error: error => {
this.alertService.error(error);
this.loading = false;
}
});
}
I would expect to have proper key in control.errors - buts it is empty - the value is only set to null in case of non number input - but is in conflict with
required validator. I cannot distinguish those 2 scenarios while I would like to - to show dedicated error message in both cases
this.componentRef.location.nativeElement.children[0].scrollTop = position;
It's not scrolling the div
Hi...I built an android app using Ionic Angular (I built a web app then created android app using ionic), but when I am trying to submit the app to the Google Store, it is getting rejected saying - "We have detected that your app generates a webview of a website without additional functionality".
Can you help me with this?
Can you help me with this?
3 replies
Thanks
Hi All, I am facing one issue with Angular with SSR.
Can anyone help me to understand what could be the issue here?
I have called one function on APP_INITIALIZER "appConfig.load()"
This function is called multiple times in server.ts file.
Is this the correct behavior?
I would like to have few API calls in this function and execute on the server before the application loads but this leading to multiple duplicate calls on the server.
app.Module.ts
export function initializeApp(appConfig: AppConfig) {
return () => appConfig.load();
}
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule.withServerTransition({ appId: 'serverApp' }),
AppRoutingModule,
// TransferHttpCacheModule,
BrowserTransferStateModule,
HttpClientModule,
BrowserAnimationsModule,
ReactiveFormsModule,
NgImageSliderModule
],
providers: [
AppConfig,
{ provide: APP_INITIALIZER, useFactory: initializeApp, deps: [AppConfig], multi: true },
{ provide: HTTP_INTERCEPTORS, useClass: ResponseInterceptor, multi: true },
{ provide: HTTP_INTERCEPTORS, useClass: JwtInterceptor, multi: true },
],
bootstrap: [AppComponent]
})
export class AppModule {}app.server.module.ts
@NgModule({
imports: [
AppModule,
ServerModule,
ServerTransferStateModule,
],
providers: [
{
provide: HTTP_INTERCEPTORS,
useClass: UniversalInterceptor,
multi: true
}
],
bootstrap: [AppComponent],
})
export class AppServerModule { }server.ts logs
server.ts--> /
appConfig.load();
server.ts--> /assets/images/favicon.ico
appConfig.load();
server.ts--> /assets/products/Demo_Make%20Fun%20Happen_Card_Front.jpg
appConfig.load();
server.ts--> /assets/products/Demo_We%20Make%20Fun%20Happen_Card_Front.jpg
Hi all, I am building a library that contains a lazy-loaded route like this:
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { MyComponent } from './components/my.component';
const routes: Routes = [
{ path: '', component: MyComponent },
{ path: 'books', loadChildren: () => import('./books/books.module').then((m) => m.BooksModule) },
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [],
})
export class MyRoutingModule {}When I compile it with ng build --prod, I get this:[...] Metadata collected contains an error that will be reported at runtime: Lambda not supported.
Anyone met the same issue ?