We help IT Professionals succeed at work.

Angular

717

Solutions

459

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.

Need a simple Visual Studio jQuery test environment.

I expect to be working in Visual Studio on a project which will involve Angular, Kendo UI and jQuery. So I need to set up a simple Visual Studio test environment where I can play around with some of the more complex jQuery commands.

What is the best way to do this in Visual Studio? I feel like I need a solution with an HTML file and a folder that contains jQuery. But feel free to suggest a few steps that can get me to that point.

And please include the steps to get jQuery installed. I assume that is just a NuGet call. But what about other dependencies?


Thanks.
0
Does Angular 7 NEED jQuery?

I will be starting a new project which includes:

KendoUI
Angular 7
jQuery

but my experiences with Angular 4 showed me that when you think you need jQuery, you have not looked hard enough at solving the problem using the features of Angular.

But I see this association between Angular, Kendo UI and jQuery.

https://www.progress.com/kendo-ui

How do these all fit together?

Curious.

Thanks,
0
Upgrading Angular 4 to Angular 7

I will be coding with Angular 7 in the near future and need to upgrade a project I created with Angular 4. This will be part of my preparation.

What steps need to be taken?

Thanks.
0
I am upgrading a site from javascript and jquery to Angular 7.

The site makes API calls to a server to deliver the HTML code.

What I am running into is that the code that comes from the server does not work.  For example, here is a test example from my html component that shows the problem.

<div [innerHTML]="pageInfo.text | safeHtml"></div>
<p><button class="btn btn-default" (click)="btnclck('btngo')">Test</button></p>

Open in new window


The first line is loaded in on initiation when the site loads and then changes when you move to a new page.
The second is a test line that I placed in there just to illustrate my problem.

The second line works exactly as it is supposed to.

But if the same button code comes in from an api read from the database, it doesn't work.

If you look at the code in the code inspector, you will see that the Angular coding has been applied to the second, but not to the first.

Angular Button Description
My assumption is that because this dynamic text is loaded after the rest of the site, the angular coding is not applied to the button tag and as such, the onclick doesn't work.

How do I get around this?  

The code has to come dynamically from a database.
0
Does MVC.Razor have a future?

How do Angular and React co-exist with Razor? Or is it a binary choice?

Either, MVC.Razor OR Angular OR React?

Curious.

Thanks.
0
Angular JS  HTTP Error 405.0 - Method Not Allowed

whenever i add the phone in data , the page throws HTTP Error 405.0 - Method Not Allowed

data: { name: $scope.Name, email: $scope.Email, phone: $scope.Phone, comments: $scope.Comments },


Html:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
<div class="row"  ng-app="MyApp" ng-controller="MyController">
            <form id="contact" action="" method="post" >
                <div class="row">
                    <div class="col-md-12">
                        <fieldset>
                            <input name="name" type="text" class="form-control" ng-model="Name" id="name" placeholder="Your name..." required="">
                        </fieldset>
                    </div>
                    <div class="col-md-12">
                        <fieldset>
                            <input name="email" type="email" class="form-control" ng-model="Email" id="email" placeholder="Your email..." required="">
                        </fieldset>
                    </div>
                    <div class="col-md-12">
                        <fieldset>
                            <input name="phone" type="text" maxlength="10" ng-model="Phone" class="form-control" id="phone" placeholder="Your Phone..." required="">
                        </fieldset>
                    </div>
                    <div class="col-md-12">
                        

Open in new window

0
I am using Angular 7 to make an API call to a database and it returns some user data (id, nameline, email);

OVERVIEW OF WHAT WORKS
In the .ts file I am saving this user data to local storage in this way:
localStorage.setItem('user', JSON.stringify(api.data));

Open in new window


Then on another page (Page1Component) I retrieve the data in this way. The "alert" at the end properly displays my user ID which is what I want.
export class Page1Component {
    myuser = JSON.parse(localStorage.getItem('user'));
  });

  ngOnInit() {
    alert("MyPOPID is ["+this.myuser.id+"]");
  }
}

Open in new window


QUESTION TO MAKE IT BETTER:
But my question is, instead of putting the myuser command in the "export class statement" of every page, is there a way to have the "myuser" variable be placed in someplace like the app.module.ts file and then have it be available to all children components under it?  If so, how would that be done. What would I need in my app.module.ts file and what would I then need in my Page1Component.ts file.
0
I have a WebAPI that I am testing which uses intialized list and id as parms passed to to model.
It's works fine using postman but when I try to pass the list parm to the controller for a
request using html and angularjs it does not work.  I get the following error?

Failed to load resource: the server responded with a status of 404 (Not Found)

<Error>
<Message>
No HTTP resource was found that matches the request URI 'http://homedev.kmhp.com/API/favorites/api/favorites/get_favorites/,RBUCK'.
</Message>
<MessageDetail>
No type was found that matches the controller named 'favorites'.

Preceding the comma before the parm RBUCK should be the initialized list for the angularjs call to the WebApi
How do I define the list in AngularJS?
I have included code snippets fro angularjs, html, WebApi (controller and model)
 
//Angularjs code

app.controller("handleFavoritesController", function ($scope, $http) {

    // Get Favorites
    $scope.get_favorites = function () {
       
        $scope.favInRequest = [];
         var data = {
            
            fav_uid: ""
            
            };
            fav_uid = document.getElementById('favuserid').value
            $http({
                method: "GET",
                url: "/API/favorites/api/favorites/get_favorites/" + $scope.favInRequest + "," + fav_uid + " "
            }).then(function (data, status, headers, config) {

                $scope.FavInRequest = response.data
                 
            

Open in new window

0
In Angular 7, I am trying to determine how to pass a button value through from the typescript  to the html page.

This is the most simple way I can illustrate what I would like to do.  

The .ts file contains this:
this.lessonbody = '<button>Continue</button>';

Open in new window


And in the HTML I'm using this:
        <div [innerHTML]="lessonbody" class="mainbody"></div>

Open in new window


Is there a way to pass that button tag from the .ts file to the .html?

What I am trying to accomplish here is send a code to an API that pulls information from a database and then the whole page is painted from that data. But in order to do this, I need to pass the full html code for things like buttons.

My full code for the .ts file is here:
import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { FormBuilder, FormGroup, Validators, } from '@angular/forms';
import { DomSanitizer } from '@angular/platform-browser';

import { Pagecode } from "../../models/pagecode";
import { PagecodeService } from '../../services/pagecode.service';


@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit {

  lessonhead = "";
  lessonbody = "";
  lessonbutton = "";
  pgref = "0.1";
  loading = false;
  constructor(
    private fb: FormBuilder, 
    private pS: PagecodeService, 
    private sanitizer: DomSanitizer, 
    private router: 

Open in new window

0
I have an Angular 7 Website that I developed on my local machine that works fine when I do a direct link to a page on my localhost.

http://localhost:4200/signin

But when I then deploy the site to a public server, the site only works when I go to the root.

This Works:
http://makeyourlifecount.org

This Does NOT Work!
http://makeyourlifecount.org/signin

I get an error message on the NOT work link that reads:

Not Found
The requested URL /signin was not found on this server.
Apache/2.2.34 Server at makeyourlifecount.org Port 80

I am not sure where to begin looking to try to solve the problem. There is no .htaccess file on this server. Do I need one?

Why would the direct access work on my local machine and not on the public server. Thanks.
0
I have a WebAPI which executes properly under postman.  I am trying to find out what I am doing
incorrectly when accessing my code via a html file.  I'm not sure whether I need to add a function in
the javascript controller to access the input in the html to use as part of the parameters to access
successfully the code to return the result set.  I am using an arraylist and a parameter. The parameter
is presented in the html.  I'm a correct in thinking I need a function in my AngularJS controller
to get the parameter from the html.

See Code snippets for javascript controller, html, my controller and model.  
Am I referencing the correct model(ng-model) in my html?

app.controller("handleFavoritesController", function ($scope, $http) {

    //Favorites - javascript controller

    $scope.favoritesInsert = {
        fav_uid: "",
        fav_link: "",
        fav_title: ""


    };
    $scope.get_favorites = {
        favuserid: "",
        favInRequest: ""

    }


    $scope.get_favorites = function () {
        $http.get("/API/favorites/api/favorites/get_favorites/" , $scope.fav_InRequest, $scope.favuserid).then(function (data, status, headers, config) {
            $scope.favInRequest = response.data
            alert("success");
        }, function (data, status, headers, config) {
            console.log("error!");
            console.log(data);
        });
    };

Open in new window

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    

Open in new window

0
What are the Big Differences between Angular 4 and Angular 7?

Thanks
0
Upgrading Angular 4 to Angular 6

I have a small and working Angular 4 project, but would like to make the switch to Angular 6. How do I do this?

What are the odds it will work with no changes?

Here's a sample of the code:

import { Component, Input, OnInit } from '@angular/core';
import { NgFor } from '@angular/common';
import { PuzzlePieceComponent } from '../puzzlepiece/puzzle-piece.component';

@Component({
  selector: 'puzzle-canvas',
  templateUrl: './puzzle-canvas.component.html',
  styleUrls: ['./puzzle-canvas.component.css']
})

export class PuzzleCanvasComponent implements OnInit {
  title = 'Puzzle Peace';
  @Input() piece:PuzzlePieceComponent;
  pieces = [];
  rowNames = [];
  columnNames = [];
  columns:number = 8;
  rows:number = 5;

  constructor() { 
    this.rowNames = ['1', '2', '3', '4', '5' ];
    this.columnNames = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H' ];
  }

  fireEvent(e){
      console.log(e.type);
  }

  ngOnInit() { 
    let index = 0;
    for(let row = 0; row < this.rows; row++) {
      for(let column = 0; column < this.columns; column++) {
        this.pieces[index] = new PuzzlePieceComponent();
        this.pieces[index].id=index;
        this.pieces[index].row = this.rowNames[row];
        this.pieces[index].column = this.columnNames[column];
        index++;
      }
    }
  }
}

Open in new window

0
I am trying to format the current date in my angularjs controller but the date is not being created
and passed to the API.

Am I using the correct syntax to create the mmddyy parm to pass to the API
This date will be used in the html ie, {{picdate}}

var app = angular.module('lobTotalsApp', []);
// Step 1 Execute API after creating date to passin
app.controller("LobTotalsController", function ($scope, $http) {
    $scope.Picture = function () {

        var picDate = format(Date(month(now()), day(now()), year(now())), "mmddyy")
        $http.get("/API/picture-of-the-day/api/PicOfTheDay/getpicbydate/" + picDate).then(function (response) {

            $scope.picDate = response.data
            
            
            alert("Capture success");
        }, function (error) {
            console.log(error);
        });
    };
//  This is first step in the Controller

Open in new window

0
Getting up and running with REACT

I have developed using Angular 4, JQUERY and JavaScript, but not yet with React.

I have a MacBook and use Visual Studio Code on the Mac for my work with Angular 4 and hope to do the same with React.

How do I get React installed so I can start programming it? And same projects / tutorials you can point me to that would be a great start for me?

Thanks!
0
how to refer Absolute path in protactor. provided below is my folder structure and my current working directory is Level3ab and I want to refer file ABC.exe. I trying with the relative path i.e. '../../../Level2/ABC.exe' but no luck in the .ts file. Is there anything I could do to get the right path here?

Root
        Level1
        Level2
                   Level2a/ABC.exe
        Level3
                   Level3a
                   Level3b
                                 Levell3b1
                                                 Level3b2 <-- current working directory

Open in new window

0
Angular: Please explain diff between Constructor and ngOnInit()

What kinds of things are done in either function?

hanks
0
Where does the "fireEvent(e)" function get defined?

In my working code here, I see I added that function. Is it possible to tell me the origins of the call from this source code?

import { Component, Input, OnInit } from '@angular/core';
import { NgFor } from '@angular/common';
import { PuzzlePieceComponent } from '../puzzlepiece/puzzle-piece.component';

@Component({
  selector: 'puzzle-canvas',
  templateUrl: './puzzle-canvas.component.html',
  styleUrls: ['./puzzle-canvas.component.css']
})

export class PuzzleCanvasComponent implements OnInit {
  title = 'Puzzle Peace';
  @Input() piece:PuzzlePieceComponent;
  pieces = [];
  rowNames = [];
  columnNames = [];
  columns:number = 8;
  rows:number = 5;

  constructor() { 
    this.rowNames = ['1', '2', '3', '4', '5' ];
    this.columnNames = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H' ];
  }

  fireEvent(e){
      console.log(e.type);
  }

  ngOnInit() { 
    let index = 0;
    for(let row = 0; row < this.rows; row++) {
      for(let column = 0; column < this.columns; column++) {
        this.pieces[index] = new PuzzlePieceComponent();
        this.pieces[index].id=index;
        this.pieces[index].row = this.rowNames[row];
        this.pieces[index].column = this.columnNames[column];
        index++;
      }
    }
  }
}

Open in new window

0
Making an HTTP Request using Angular 4

I got this question today in an interview and used it to explain the elements of an Angular 4 Component:

selector
templateURL
styleURL

and what these mean to making a component something you can easily import into another Angular 4 component.

How would you have answered that?

"How do you make an HTTP Request using Angular 4?"

Thanks
0
Getting my Angular 4 application running again on my MacBook

I have not run this app for months and also upgraded my MacOS to Mojave weeks ago. And now I need to run my Angular 4 program from Visual Studio Code.

I have forgotten exactly how to force it into debug mode. Or, even run without debugging mode. I need to test if it still works.

How can I do this?

I assume I need to open Terminal and start the Node Angular server. How do I do this?

Thanks.
0
Hello,

I am using obout custom control Grid for an application which is in ASP.NET web forms .
I want to replace this obout Grid with any other non-paid alternative control [like ng-grid in angularjs or so]
Can anyone tell how to replace obout Grid control with an alternative one which is equally good. If if yes , can you share an example of the same ?
0
Hi,

I am studying Angular 7 with ASP.NET WebAPI.
I host ASP.NET Web API REST Service in IIS 10.
In Angular 7, I can successfully GET from ASP.NET WebAPI, but I receive Error 405 when POST or PUT to ASP.NET WebAPI.
(I can successfully GET / POST / PUT to the same ASP.NET WebAPI using Postman.)

I cannot figure it out, thanks for your help.

While I click "save" button, it display error 405 (Method Not Allowed)
Client code:
import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
 
import { Observable, of } from 'rxjs';
import { catchError, map, tap } from 'rxjs/operators';

import { MDLSyst } from '../_Model/MDLSyst';
import { MessageService } from '../_Service/message.service';

const httpOptions = {
  headers: new HttpHeaders({ 'Content-Type': 'application/json' })
};

@Injectable({
  providedIn: 'root'
})
export class SystService {

  private systUrl = 'http://localhost/fars-api/api/syst';  // URL to web api

  constructor(private http: HttpClient,
    private messageService: MessageService) { }
 
  getSystList(): Observable<MDLSyst[]> {
    return this.http.get<MDLSyst[]>(this.systUrl)
      .pipe(
        tap(_ => this.log('fetched SystList')),
        catchError(this.handleError('getSystList', []))
      );
    }

  /** GET syst by id. Will 404 if id not found */
  getSyst(id: number): Observable<MDLSyst> {
    const url = `${this.systUrl}/${id}`;
    return this.http.get<MDLSyst>(url).pipe(
      tap(_ => this.log(`fetched syst id=${id}`)),
      

Open in new window

0
I'm using Angular and Typescript/Javascript.

I am getting an error message that says, "this is undefined." With this code:

public converse(msg: string) {
    const userMessage = new Message(msg, ESendBy.user);
    this.update(userMessage);

    return this.client.textRequest(msg)
      .then(res => {
        console.log(res);
        const msgArr = res.result.fulfillment.messages;
        if (Array.isArray(msgArr)) {
            console.log("in array");
            console.log(msgArr);
            msgArr.forEach(function(entry) {
              const botMessage = new Message(entry.speech, ESendBy.bot);
              console.log(botMessage);
              this.update(botMessage);
            });
          }
        else {
          console.log("not array");
          const speech = res.result.fulfillment.speech; 
          const botMessage = new Message(speech, ESendBy.bot);
          this.update(botMessage);
        }
      });
  }

Open in new window


When the variable msgArr is NOT and array, the this works.

But when the variable msgArr IS an array, it gives the above error.

Here is what is being returned from the text request:

fulfillment: Object { 
speech: "If you know nothing about MYLC, please ask for an overview.", 
messages: (2) […]
​​​​0: Object { type: 0, speech: "Hello. If you are here to learn about a theme, please state the theme name." }​
1: Object { type: 0, speech: "If you know nothing about MYLC, please ask for an overview." }​​​​
length: 2
messages: (2) […] }

Open in new window

0
I have a side project that I want to rewrite on my own time. I want to use ASP.Net Core and Angular as front end.

I'm reading about the latest version of Angular https://angular.io/guide/releases

Is it Angular 7 but the stable version is 6?
0
Compare KendoUI w/ Angular 4?

I have used Angular 4 but not KendoUI.

please describe what KendoUI is  and how its different from Angular 4.

Thanks
0

Angular

717

Solutions

459

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.