Angular

556

Solutions

372

Contributors

Angular is a JavaScript open-source web application framework used to develop single-page applications. It aims to simplify both the development and the testing of such applications by providing a framework for client-side model–view–controller (MVC) and model–view–view-model (MVVM) architectures, along with components commonly used in rich Internet applications. Angular is the front-end part of the MEAN stack, together with Node.js runtime, Express.js backend framework and MongoDB database.

Share tech news, updates, or what's on your mind.

Sign up to Post

I want to use new angulat material table to show my produkt data. I was unsing old table perfectly but can not adopt to new angular material table.

I am getting my data in this.produkts array which i want to render in new angular material table. I used to render that in old table.

Can someone please tell me how to render my data in new angular table?

Component.ts

getPage(page: number) {
    if (this.produktCache.has(page)) {
      this.produkts = this.produktCache.get(page);
      this.currentPage = page;
    } else {
      this.produktService.getProduktSearch(page.toString(), this.produktsPerPage.toString(), this.filiale, this.artnr, this.produktbez,
        this.werbetext, this.mgeht, this.lfname, this.hinweise, this.bildnummer)
        .then(
          data => {
            this.produkts = data;
            console.log('array', this.produkts);
            this.currentPage = page;
            this.produktCache.set(this.currentPage, this.produkts);
          }).catch(
            (error: any) => {
              console.log('Produkt not found!');
            });
    }
  }

Open in new window


pervious table:

<mat-card>
  <table class="product-list" *ngIf="produkts">
    <thead>
      <tr>
        <th>{{ 'Artikle Nummer' }}</th>
        <th>{{ 'Filiale' }}</th>
        <th>{{ 'Bezeichnung' }}</th>
        <th>{{ 'Mehr Info' }} </th>
      </tr>
    </thead>
    <tbody>
      <tr [routerLink]="['/rullko/produkt/', product.Bildnummer]" *ngFor="let product of produkts | paginate: { id: 'server', itemsPerPage: produktsPerPage, currentPage: currentPage }">
        <td> {{ product.ARTNR }} </td>
        <td> {{ product.FILIALE }}</td>
        <td> {{ product.PRODUKTBEZ }} </td>
        <td>
          <button mat-icon-button color="primary" [routerLink]="['/rullko/produkt/', product.Bildnummer]">
            <mat-icon>more_vert</mat-icon>
          </button>
        </td>
      </tr>
    </tbody>
  </table>
  <app-pagination (pageChange)="getPage($event)"></app-pagination>
  <mat-card-actions align="end">
    <button mat-raised-button color="warn" [routerLink]="['/rullko/produkt']">
      <mat-icon>clear</mat-icon>CANCEL</button>
  </mat-card-actions>
</mat-card>

Open in new window


New table:
<table mat-table [dataSource]="this.produkts" class="mat-elevation-z8">
  <ng-container matColumnDef="artikle">
    <th mat-header-cell *matHeaderCellDef> ARTIKLE NO. </th>
    <td mat-cell *matCellDef="let user"> {{ this.produkts.ARTNR }}</td>
  </ng-container>
  <ng-container matColumnDef="filiale">
    <th mat-header-cell *matHeaderCellDef> FILIALE </th>
    <td mat-cell *matCellDef="let user"> </td>
  </ng-container>
  <ng-container matColumnDef="bezeichnung">
    <th mat-header-cell *matHeaderCellDef> BEZEICHNUNG </th>
    <td mat-cell *matCellDef="let user"> </td>
  </ng-container>
  <ng-container matColumnDef="details">
    <th mat-header-cell *matHeaderCellDef> DETAILS </th>
    <td mat-cell *matCellDef="let user"> </td>
  </ng-container>
  <tr mat-header-row *matHeaderRowDef="columnsToDisplay"></tr>
  <tr mat-row *matRowDef="let myRowData; columns: columnsToDisplay"></tr>
</table>

Open in new window

0
Cloud Class® Course: C++ 11 Fundamentals
LVL 12
Cloud Class® Course: C++ 11 Fundamentals

This course will introduce you to C++ 11 and teach you about syntax fundamentals.

I've been trying to figure this out all afternoon and finally got it working but not sure why it works this way.

1. You can see the code here https://drive.google.com/open?id=1rrIeSnG5orRGi5ftTb14jEhUJfg88Oy1
Just download, unzip and click on page.html

2. Page loads and the dropdown is set on "Weekly". You see the "selected"
d1.png
3. I change the dropdown value to something else. I had to do this to make the new selected value stick. You can see it in
$(document).on('change', '#scheduleArea .schedule select.typeSelector', function () {  
  line 375

	       $(this).find('option[value="' + value + '"]').attr("selected", "selected");
		$(this).find('option[value="' + value + '"]').prop("selected", "selected");

Open in new window


d2.png
Why did I need to do both? any other way of doing this?
0
Does Angular.js or Ember.js the better choice for JavaScript frameworks?
0
Hello Experts,

I am trying to use browser back button to go to a specific URL. I used PlatformLocation in Angular to detect the popstate event. When I press the back button to go to the URL, it shows the previous angular route for fraction of seconds and then redirects me to the URL. I would like to eliminate that fickle from back button. So, it directly goes to the desired URL, without going to the previous angular route.

Thanks in advance.
0
I have been waiting for responses on my questions since last week? Can someone respond please?
0
We are using upload tab in CKEditor in my Angular/Ionic 3 project. Currently, we are getting server not found error, So is there any steps required to upload an image in the server?
0
How do I use switchMap here in my below code?

getObject(id: string) {
    console.log(id);
      return this.http
      .get<RootObject>('api/object')
      .pipe(catchError(this.handleError));
  }

Open in new window

0
So I am trying to implement routing on a search key up. I have my search component as follow

search.component.html
<form>
  <div class="form-group input--compressed">
    <div class="form-group__text text-muted">
      <input id="search" placeholder="Search Object" type="search" (keyup)="search($event.target.value)">
    </div>
  </div>
</form>

Open in new window


search.component.ts like this..
constructor(private router: Router) { }

  ngOnInit() {
  }

search(id: string) {
        this.router.navigate(['/object/' + id]);
}

Open in new window


my route is defined in app.module.ts
const appRoutes: Routes = [
  { path: 'object/:id', component: ObjectSummaryComponent },
  { path: '', component: DisplayErrorComponent }
];

Open in new window


If I just type a value in the search box, it doesn't route to my component. But after typing if I press enter ..it does.  I want to be able to route it on after typing ...or if value selected from list of ajax options for search box.  What am I missing here?
0
Hi I have been trying to write test cases for my registration service. It has a url which it sends 4 values. the service is as follows:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http'



interface registerResponse {
  success: boolean,
  message: string
}

@Injectable()
export class AuthService {

private _regurl ="http://localhost:3000/api/register"
  constructor(private http: HttpClient) { }



  registerUser(username,email,date,  password) {
   
    return this.http.post<registerResponse>(this._regurl, {
      username,
      email,
      date,
      password
      
     
    })
  }

}

Open in new window


I am still learning how to write test cases, i m trying to get the registerResponse to work.

here is what i have written till now

import { TestBed, async, inject } from '@angular/core/testing';
import {
  HttpModule,
  Http,
  Response,
  ResponseOptions,
  XHRBackend
} from '@angular/http';
import { MockBackend } from '@angular/http/testing';
import { AuthService } from './auth.service';
import { HttpClient } from '@angular/common/http'


describe('RegisterService', () => {

  beforeEach(() => {

    TestBed.configureTestingModule({
      imports: [HttpModule],
      providers: [
        { provide: HttpClient, useValue: 'http://localhost:3000/api/register' },
        AuthService,
        { provide: XHRBackend, useClass: MockBackend },
      ]
    });
  });

Open in new window


I know its not much I hv only defined mockbackend but any help would be appriciated

Thank You
0
Hi,

My manager asked me updating a website from codeigniter to  
backend: API using PHP (Symfony) or node (expressjs) or Drupal 8 . or any other framework. can you give me explanations?

And for single page applications Angular 4 or Vue js
0
Introducing Cloud Class® training courses
LVL 12
Introducing Cloud Class® training courses

Tech changes fast. You can learn faster. That’s why we’re bringing professional training courses to Experts Exchange. With a subscription, you can access all the Cloud Class® courses to expand your education, prep for certifications, and get top-notch instructions.

I have two separate application built mainly using angularjs and  laravel.

1) Front office
2) Back office

The authentication method is Laravel passport.

The problem I am encountering is when I login to both front and back office. Then when I logout from either the front or back office app both application get logout.

This is happening when I'm using  the same browser with multiple tabs.

Are there implementable solutions to the mentioned problem.

Your help is kindly appreciate.
0
I have a custom confirmation popup (Yes/No) which i call through angular typescript file (TS)

parentpage.ts

export class ManageConfigs implements OnInit,AfterViewInit  {
  @ViewChild('warning') warning: any;

    var retVal = this
                   .warning
                   .showWarningWithConfirmation("Are you sure you want to delete this?");
}

Open in new window

Based on button selection (yes/no) popup will return value true or false. That means retVal will be true/false.

But the issue is popup is rendering after calling the line.

var retVal = this
               .warning
               .showWarningWithConfirmation(
                  "Are you sure you want to ",
                  "delete region " +regionName + "?"
               );

Open in new window

popup.ts

public showWarningWithConfirmation(messageLine1,messageLine2): boolean {
  this.visible = true; 
  this.messageLine1 = messageLine1;
   this.messageLine2 = messageLine2;
  setTimeout(() => this.visibleAnimate = true, 100);  
  return this.retWarningValue;
}

Open in new window

popup.html

  <div class="container-fluid" id="main-content" (click)="this.visibleAnimate = false;this.visible = false" [@hideShowAnimator]="hideShowAnimator">
      <div class="custom-modal modal fade" id="warningModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" [ngStyle]="{'display': visible ? 'block' : 'none', 'opacity': visibleAnimate ? 1 : 0}">
          <div class="modal-dialog modal-sm" role="document">
          

Open in new window

0
I am interested to know which IDE experts uses for Angular development. I have been back and forth between VS Code and paid version of web storm. While I like the look and feel for VS code, web storm is predictable as in things work when you expect them to vs VS Code.

Opinion thoughts?
0
I have config.json file where i have procided all urls and keys. There is one parameter called "googleMapsApiKey" where i have my "map key". I want to provide this key to my module file so that i can use google maps but I am unable to provide it. Below is my code.

config.json

{
      "googleMapsApiKey": "MY KEY",
   }

Open in new window


MobileContentModule.ts

import { ConfigService } from '../../../HiP-CmsAngularApp/app/config.service';

    @NgModule({
      imports: [
        AgmCoreModule.forRoot({
          apiKey: 'WANT TO PROVIDE THAT KEY HERE', ---> from config.json
          libraries: ['places']
        }),
        CommonModule,
        FormsModule,

Open in new window


There is one service called ConfigService where I am accessing my config.json file. I have imported this service in MobileContentModule.ts file.

Can anyone help me to get my google api key from config.json file? Purpose of this is, that we dont want to expose this key on github.
0
I am new to Angular and Firebase. I created an app where I am using email user and pass auth with Firebase auth.  When the user registers with a user and pass, two additional fields are added and populated in Firestore (Display Name and photoURL).  Those are populated by code in the auth.services.ts file.  So, when a user logs in again, it authenticates but then writes the Display name and photoURL again into the FIrestore.  I want to be able to add (or let the user add) the Display name and photo after they are logged in.  Here is what I have so far.  Any thoughts or direction?

FirestoreDB
FirebaseDB
Code in auth.services.ts
Auth Services
0
need urgent help with dom recycling
0
need help with DOM recycling in Angular app.
I have an angular app which renders about 1000 records, want to display only set of records on browser, add / remove records when user scrolls up or down
1
How to update the property value in angular on updating the check box value. I have a ng-repeat as follows

<li ng-repeat="n in person.notifications">
{{n.selected = person.isAccepted&& person.isReviewed}}
<label><input type="checkbox" ng-checked="n.selected" ng-model="n.selected" ng-disabled="n.readOnly" />
</li>

<div class="checkbox">
<label><input type="checkbox" ng-model="person.isAccepted" />I accept
</div>

Open in new window


If the person already notified I will have the selected as true while getting the data.

In my database when this field isReviewed true and if the person clicks on isAccepted I would like to make the checkbox in ng-repeat checked and disabled by default.

Note : I am using type script and my data is inherited from two classes, so I just post the sample code for my requirement
0
I have an array of checkboxes coming from a collection.

See below:

<div class="form-group">
    Select days in a week :
    <td class="even" *ngFor="let item of dayList">
    <input value="{{item.check}}" type="checkbox" checked="item.check" formControlName = "selectedDays">  {{item}}
   </div>

Open in new window


formControlName I am set as selectedDays.

I need to generate JSON object for the selected checkbox values.

Currently, i am getting boolean value in selectedDays. But I am supposed to get an array of checked values in an array inside JSON object.

this.dayList = ['Sun', 'Mon', 'Tue','Wed',"Thu","Fri","Sat"];

JSON Object looks like below, please note the value of selectedDays, it is supposed to be "Sun, Mon" based on selection, but it is showing as true.


 
Object
    date
    :
    "2"
    day
    :
    "Mon"
    hour
    :
    "3"
    minute
    :
    "3"
    schedulerjobtype
    :
    "Daily"
    selectedDays
    :
    true
    useCase
    :
    "UC 2"
    zone
    :
    "Zone 3"

Open in new window


How can I implement this?
0
Cloud Class® Course: SQL Server Core 2016
LVL 12
Cloud Class® Course: SQL Server Core 2016

This course will introduce you to SQL Server Core 2016, as well as teach you about SSMS, data tools, installation, server configuration, using Management Studio, and writing and executing queries.

I have dialog box where user can enter data and after clicking on "create", my dialog box gets close and user gets notification. I want to close my dialog box after user get notification and if user enters wrong data, user should get notification for that too and dialog box should not get close.

Currently, everything is working properly but I want my dialog box should disappear after notification (toster service).

Can anyone help me with this thing so that my dialog box will stay till i get notification for success and also for error?

exhibit.component.ts (main component)
----------------------------------------------------------------------------------------------------------------------------------------------------------
createExhibit(event: any) {
    let context = this;
    this.createDialogRef = this.dialog.open(CreateExhibitDialogComponent, { width: '45em', data: {} });
    this.createDialogRef.afterClosed().subscribe(
      (newExhibit: Exhibit) => {
        if (newExhibit.latitude) { newExhibit.latitude = newExhibit.latitude.toString().replace(/,/g, '.'); }
        if (newExhibit.longitude) { newExhibit.longitude = newExhibit.longitude.toString().replace(/,/g, '.'); }
        if (newExhibit) {
          this.exhibitService.createExhibit(newExhibit)
            .then(
              () => {
                this.toasterService.pop('success', this.translate('exhibit saved'));
                setTimeout(function () {
                  

Open in new window

0
I am having trouble with the protractor tests. I'm not clear on what changes I should make to make to the existing AngularJS code to make it compatible with Angular 5.

Existing AngularJS code...

card.template.html
<article class="rt-card">
  <header class="rt-card__header">
    <h1 data-ng-transclude="title"
        class="rt-card__title"
        data-rt-id="{{::$ctrl.rtId}}Title"></h1>
  </header>
  <section data-ng-transclude="content"
           class="rt-card__content"
           data-rt-id="{{::$ctrl.rtId}}Content"></section>
  <footer data-ng-transclude="link"
          class="rt-card__footer"
          data-rt-id="{{::$ctrl.rtId}}Footer"></footer>
</article>

Open in new window



card.component.ts
import * as main from "../../common/main";

main.module.component('rtCard', {
  template: require('./card.template.html'),
  bindings: {
    rtId: '@'
  },
  transclude: {
    'title': 'rtCardTitle',
    'content': 'rtCardContent',
    'link': 'rtCardLink'
  }
});

Open in new window



  • Test Files

card.page.ts  *Test File*
import {browser} from 'protractor';
import {CardComponent} from './card.component';

export default class CardPage {
    public readonly defaultCard: CardComponent = new CardComponent(`[data-rt-id='default-card']`);

  constructor() {
    browser.get('#/components/card');
  }
}

Open in new window




card.component.ts  *Test File*
import {element, by, ElementFinder} from 

Open in new window

0
The company I work for is looking to migrate their current ui-library from AngularJS to Angular 5.

I am having trouble with the protractor tests. I'm not clear on what changes I should make to make it compatible with Angular 5.

Existing AngularJS Code
// card.template.html

<article class="rt-card">
  <header class="rt-card__header">
    <h1 data-ng-transclude="title"
        class="rt-card__title"
        data-rt-id="{{::$ctrl.rtId}}Title"></h1>
  </header>
  <section data-ng-transclude="content"
           class="rt-card__content"
           data-rt-id="{{::$ctrl.rtId}}Content"></section>
  <footer data-ng-transclude="link"
          class="rt-card__footer"
          data-rt-id="{{::$ctrl.rtId}}Footer"></footer>
</article>



// card.component.ts 

import * as main from "../../common/main";

main.module.component('rtCard', {
  template: require('./card.template.html'),
  bindings: {
    rtId: '@'
  },
  transclude: {
    'title': 'rtCardTitle',
    'content': 'rtCardContent',
    'link': 'rtCardLink'
  }
});



// Test Files

// card.page.ts  *Test File*

import {browser} from 'protractor';
import {CardComponent} from './card.component';

export default class CardPage {
    public readonly defaultCard: CardComponent = new CardComponent(`[data-rt-id='default-card']`);

  constructor() {
    browser.get('#/components/card');
  }
}




// card.component.ts  *Test File*

import {element, by, ElementFinder} from 'protractor';
import {promise} from 

Open in new window

0
how to send email to multiple   recipients in .net core using mail message
0
I have created a angular reactive form.

this.signUpForm = this.formBuilder.group({
      dealershipInformationForm
    });

const dealershipInformationForm = this.formBuilder.group({
      'name': new FormGroup({
        'legalName': new FormControl(null, [Validators.required, Validators.minLength(2), Validators.maxLength(10)]),
        'commonName': new FormControl(null, [Validators.required, Validators.minLength(2), Validators.maxLength(10)]),
      })
    });

Open in new window


I am trying to print different errors messages based on different error types.

export const errors = {
    'legalName': [
      {
        'type': `required`,
        'message': `Legal Name is required`
      },
      {
        'type': `minLength`,
        'message': `Legal Name cannot be less than 2 characters`
      },
      {
        'type': `maxLength`,
        'message': `Legal Name cannot be more than 10 characters`
      },
    ],
    'commonName': [
        {
        'type': `required`,
        'message': `Common Name is required`
        },
        {
        'type': `minLength`,
        'message': `Common Name cannot be less than 2 characters`
        },
        {
        'type': `maxLength`,
        'message': `Common Name cannot be more than 10 characters`
        },
    ]
};

Open in new window


Here's how I am trying to access the form control-
this.signUpForm.controls['dealershipInformationForm'].get('name).get('legalName');

Open in new window


And this is the code to identify the error types and display the corresponding error message.
<span *ngIf="!formCtrl.valid && formCtrl.touched">
    <span *ngFor="let error of errors">
            <strong *ngIf="formCtrl.hasError(error.type)">{{error.message}}</strong>
    </span>
</span>

Open in new window

where
formCtrl = this.signUpForm.controls['dealershipInformationForm'].get('name).get('legalName');

Open in new window


Now, the problme is that I am able to print the error only for REQUIRED, and not for MOINLENGTH or MAXLENGTH.

Please help me out,
0
I have created the following page which is responsive.

<div class="container-fluid" id="#test">

	<div class="row"> 
		<div class="col-md-3">
			<div ng-include src="'assets/templates/theme/sidemenu.php'"></div>
		</div>
		<!--
		<div class="table-responsive">
			<ul class="list-group text-center">
				<li class="col-xs-6 col-md-3 col-sm-3 col-lg-3 list-group-item" ng-repeat="product in products">
					<figure>
						<img width="50px" height="50px" ng-src="{{backend_url}}{{product.thumbnail[0].path}}" />
						<figcaption>
							{{product.name}} <h3>{{product.price.cost_price | currency}}</h3>
						</figcaption>
					</figure>
					<input class="btn btn-success" type="button" ng-click="addItemToCart(product,1)" value="BUY" />
				</li>
			</ul>
		</div>
		-->
		<!--
		<div class="col-md-9">
			<div class="row">
				<div class="col-sm-6 col-md-3">
					<h1>{{ subcategory }}</h1>
				</div>
			</div>
		</div>
		-->
		<div class="col-md-9">
			<p class="subHeader" ng-show="isSubHeader">
			{{subcategory | uppercase }}
			</p>
		</div>
		
		<div class="col-md-9">
			<div class="row">
				<div ng-if="products.length===0">
					<p>{{msgProduct}}</p>
				</div>
				<!--  
				col-lg-2 col-md-4 col-xs-6				
				col-sm-6 col-md-3  
				-->
				<div class="col-md-3 col-sm-6 col-xs-6 text-center" ng-repeat="product in products track by $index">
				  <div class="thumbnail">
					<div class="card-img">
					
						<div class="discount" ng-if="product.price.cost_price != 

Open in new window

0

Angular

556

Solutions

372

Contributors

Angular is a JavaScript open-source web application framework used to develop single-page applications. It aims to simplify both the development and the testing of such applications by providing a framework for client-side model–view–controller (MVC) and model–view–view-model (MVVM) architectures, along with components commonly used in rich Internet applications. Angular is the front-end part of the MEAN stack, together with Node.js runtime, Express.js backend framework and MongoDB database.