[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x

Angular

589

Solutions

394

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

Hi all,
I am trying to create a login form in Angular 6. My test app check the data written from the current user and try to match with the data received from a remote service via http (post). This is the point: with a simple request as following, all works correctly. But what about a request also with header and token? How can I create a function with this information? Or, do you have a link with a specific tutorial for this case? Thank you very much!

PS: I almost never insert "urgent" for a request but this is really urgent!

    onlogin(): void {
    
    .get('myLink'=;
    .subscribe(data => {
        this.data = data;
        this.loading = false});
    }
    
    (....)

Open in new window


(example from official Angular 6 Book, page 157)
0
PMI ACP® Project Management
LVL 12
PMI ACP® Project Management

Prepare for the PMI Agile Certified Practitioner (PMI-ACP)® exam, which formally recognizes your knowledge of agile principles and your skill with agile techniques.

Hallo, I would understand very well the Angular @HostBinding concept. Unfortunately, my book is very good but this concept is not very clear explained.

See please the code:

    @Component({
      selector: 'app-test-component',
      templateUrl: './test-component.component.html',
      styleUrls: ['./test-component.component.css']
    })
    export class TestComponentComponent implements OnInit {
    
      @Input() dataModel:AppModel;
      @HostBinding('attr.class') cssClass = 'alfa';
    
      constructor() { 
    
    (...)

Open in new window


My personal explanation: "host binding allow to set something in the host element (in this case the app-test-component tag) from within the component it self (in other words, from this file I mentioned below); in this case, I set the class attribute of this tag to the variable named cssClass and with attribute 'alfa'". Is it correct?

In this case, if I defined the 'alfa' style in the corrispondent css file, why I don't see this style (i.e. background color or something else) in the page which shows my component?

Thank you very much!
0
Hi all, in continuous delivery / integration for a Java Web Application there is exact phases and step to observe. My question is: which are the corrispondente phases for Angular App? And for Android app?

Thank you very much
0
I am using angularjs 1. When I invoke the "updateProfile" below, it would display a modal dialog:

$scope.updateProfile = function(){
      modalService.showModal({}, modalOptions).then(function (result) {
        //my code
      });
}

Open in new window


angular.module('myApp')
		.service('modalService', ['$uibModal',
    function ($uibModal) {

        var modalDefaults = {
            backdrop: true,
            keyboard: true,
            modalFade: true,
            templateUrl:'../assets/templates/main/modal.php'
        };

        var modalOptions = {
            closeButtonText: 'Close',
            actionButtonText: 'OK',
            headerText: 'Proceed?',
            bodyText: 'Perform this action?'
        };
		
        this.showModal = function (customModalDefaults, customModalOptions) {
            if (!customModalDefaults) customModalDefaults = {};
            customModalDefaults.backdrop = 'static';
            return this.show(customModalDefaults, customModalOptions);
        };
		
        this.show = function (customModalDefaults, customModalOptions) {
            //Create temp objects to work with since we're in a singleton service
            var tempModalDefaults = {};
            var tempModalOptions = {};

            //Map angular-ui modal custom defaults to modal defaults defined in service
            angular.extend(tempModalDefaults, modalDefaults, customModalDefaults);

            //Map modal.html $scope custom properties to defaults defined 

Open in new window

0
I have a form that was developed by a contractor that is no longer with us. It is written with Angular JS and I have been able to make some adjustments. However, I have been unsuccessful it getting a new field from one SharePoint list to be captured and then stamped to a new record on a list when the form is submitted below are all of the ts files that I believe are associated with this process. I have added the field name "SharedApprovalMailbox" everywhere that I think it should be applicable to get it stored and copied to the new record.  Please let me know what I am missing.  The list the value is stored in is 'TrainingUserGroupInventory'  the list being written to is 'Requests'.

CORE Service TS
import {Injectable, NgZone} from '@angular/core';
import {Http, Headers, RequestOptions, Request, RequestMethod, Response, URLSearchParams} from '@angular/http';
import {HttpClient, HttpParams, HttpHeaders, HttpErrorResponse} from '@angular/common/http';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/switchMap';
import { sp, Web } from '@pnp/sp';
import { environment } from '../../environments/environment';
import { fromPromise } from 'rxjs/observable/fromPromise';

@Injectable()
export class RequestService {
    public _requestTypes;
    public _curriculums;
    public _selReq;
    public _userProfile;
    public _wwidData;
    public _trgUgInv;
    public _distTrgs;
    constructor(private _http: HttpClient) { }
    public getWWIDDataByWWID(wwid) {
        

Open in new window

0
I am working with a Mobile app using XAML and WebView.  It is also using Angular.

In Angular, I know that this syntax is like a "placeholder" for actual data you want to put on the form:

{{task.PartActualEndDate}}

But what I need help determining is what formatting is being applied to this date value?  The CSS class "dataColSig" is just setting the width to 23%.

 <tr><td class="labelColSig">Date:</td><td class="dataColSig">{{task.PartActualEndDate}}</td><td class="labelColSig">Date:</td><td class="dataColSig">{{task.ActualEndDate}}</td><td class="labelColSig">Date:</td><td class="dataColSig">{{task.ApprovedDate}}</td></tr>

Open in new window


There is a lot of .js code to wade through.  How can I quickly find where the date format is being applied by Angular?

Debugging this at runtime is tricky, since this is a XAML app using WebView to display the HTML page.  I can't simply right-click and "Inspect element" on the HTML page at runtime.

I can set breakpoints in the JavaScript and then turn on Script as the debug type in Visual Studio ... so I do have that.  It's just that none of the breakpoints seem to be getting hit where task.PartActualEndDate is referenced in the .js code (that I  can tell).

Screenshot of the date values at runtime:

format date angular
0
Hello, Experts!

Environment:

Windows Server 2016
IIS version 8
the site lives in c:\inetpub\sales.cbac.com
ports are http 80 and https 443

Issue:

What might be causing the issue of receiving data from a REST call using angular hosted on IIS 8 (see image attached)? I want to start a dialogue so you guys can ask more questions and I could provide more narrowed answers.
image--8-.png
0
I was handed over a support tool by our contractor that is based on Angular JS. I have some basic understanding of how it functions, but I am having trouble turning off a check on a particular module that is required that an attachment is included before the form can be submitted to a SharePoint list. I have included the code for the HTML as well as the associated code files. Please advise what need to be changed to allow for an attachment to be included but NOT have it be required.

HTML
<!--removed this from submit button [disabled]='!trgIssueForm.valid'-->
<div [@routerTransition] class="panel panel-primary">
    <!--<h2>Request Management- <small>{{_requestService?._selReq?.Title}}</small></h2>-->
    <div class="panel-heading">
        {{_requestService?._selReq?.Title}}
    </div>
    <!--<hr>-->
    <div class="panel-body">
        <form class="form-horizontal"
              novalidate
              (ngSubmit)="saveRequest()"
              [formGroup]="trgIssueForm" >
            <fieldset>
                <div class="checkbox">
                    <label class="formyself">
                        <input type="checkbox" formControlName="MyRequest">This request is for myself
                    </label>
                </div>
                <div class="form-group">
                    <mat-form-field class="col-md-6">
                        <input matInput class="form-control" 
                                id="requesterWWIDId" 
                    

Open in new window

0
I have a problem making this code work in IE. I used "remove" but that's not the correct solution.

I'll go step by step

1. You can download the sample code here https://drive.google.com/file/d/1HGbYRMGBjl7_BFwsb10QJLlVPOGiEIBH/view
 click on page.html to see the example. Corresponding JS file is Reporting.js

2. Page loads. You see the options for the second dropdown
d1.png
3. Choose, for example, LeaseNo, from the first dropdown. You see the second dropdown is enabled and you see the values in there
d2.png
4. This is the line of code in Reporting.Js that does it
$('option', operatorSelect).not($("option[datatype *= '" + fieldDataType + "']", operatorSelect))
				.attr('disabled', 'disabled').remove();

Open in new window


5. It used to be this line but I had to change it because this didn't work in IE11
 $('option', operatorSelect).not($("option[datatype *= '" + fieldDataType + "']", operatorSelect)).hide();

Open in new window


6. This is the problem with using .remove() --> it removes the options. So now, if I choose another option from the first dropdown, the options that need to show up have been removed. Here's an example
d3.png
.hide() won't work in IE11. If I use .remove...it actually removes the options. This is another example I found but I don't know how to implement it
http://jsfiddle.net/we89rx4c/13/

I need to hide/display the options and make it work for IE11, Chrome and Edge. There has to be a way to do this.

I thought about cloning the original select options and then use that whenever use chooses another option from the first dropdown..like refreshing the second dropdown with each select... but that didn't work either.  I used this var $options = $("select.fieldOperator > option").clone();
0
Explain how TypeScript fits into Angular?

I coded Angular 4 and am pretty sure I used TypeScript. But, I can not recall exactly where.

Please refresh my memory.

Thanks
0
OWASP: Forgery and Phishing
LVL 12
OWASP: Forgery and Phishing

Learn the techniques to avoid forgery and phishing attacks and the types of attacks an application or network may face.

Advantages of Tensorflow.JS?

What are the benefits of using Tensorflow.JS in comparison to other Javascript frameworks?

Does it transpile like Angular?

What other frameworks are similar?

Is there any benefit to using Tensorflow.JS with a .NET back-end?

Thanks
0
I want to create a form that collects a persons email address and then a dynamic list of check boxes. (The dynamic part will come from a DB query, but for purposes of this question, I am providing a sample scope array.

What I need help with is how to set up the ng-repeat to allow for that dynamic list to be made available as a set of post vals upon submit.  The following is a modified piece of the code for demo purposes.

Here is the key portion of my Angular Code:

$scope.seminars = [
    { id: 1, name: 'Seminar One' },
    { id: 2, name: 'Seminar Two' },
    { id: 3, name: 'Seminar Three' },
    { id: 4, name: 'Seminar Four' }
  ];

$scope.submitFm = function (data) {
	console.log("Arrival at submit for checkboxes");
	console.log(data);
};	

Open in new window


And here is the HTML Code. I am creating a form that the attendee fills out to select which seminars they want to attend.  The first field of the form is email. The second field is a check field that I've created.  The third is my attempt at an ng-repeat to get the list of selected seminars.

<form id="attnFm" name="attnFm" class="form" ng-if="!msg">
       <input type="hidden" ng-model="attn.post_actions" ng-init="attn.post_actions='matm_attend'"/>
       <div class="row">
		 <label class="sr-only" for="email">email</label>
		 <input type="email" class="form-control" id="email"
                                         placeholder=" Email" 
                                         

Open in new window

0
Why am I stuck on this?! can't be that hard.

1. You can see the sample code here https://drive.google.com/open?id=1Z4CJc4mjOLZ8O8rCV3aqF2zaxrY3ZddA
Download and please just click on page.html

2.  You see the third filter.  You can click on "Add" and dynamically add rows.
f1.png
3. The third filter can be a text box or a dropdown.

4. I want to get the values of that third filter (dropdown or textbox), in order. The name is "FilterValues" and "camillatest" for the dropdown select.

5. I tried this and you can see it in Reporting.js but didn't work. I'll keep working on it and if I figure it out, I'll post back. So, I want to get value of textbox or the dropdown. Whatever the user has in the third filter.

var holdValues = []; //loop thru and add to this array

	$('.portfolio').each(function (index) {

		var val = $('#portfoliothirdfilter', this).find('select[name="camillatest"]').val()
		alert(val)
		var val2 = $('select[name="camillatest"]', this).val();
		alert(val2)
	});

Open in new window

0
I have one last problem with this code....

1. You can see the code here https://drive.google.com/open?id=1uZAdMSnw0QrfjJbhijqeDu2NQTk5wFi4
click on page.html

2.  Page loads and you see the radiobutton checked
r1.png
3. Click on Add and another row is added but now, the first radiobutton is unchecked.
r2.png
4. I checked the "id" and "name" and they're unique. Not sure why this is happening. I'll continue working on it. If I figure it out, I'll post back.
0
This can't be that hard but I spent all day on it and still can't get this right.

I really , seriously, know I should create a JSFiddle but I have the code here. I promise I'll learn how to do JSFiddle :)

Julian and LeakIM helped me with this...

1. Code is here. Click on page.html
https://drive.google.com/file/d/16gxJi-mbi3q4o19Y7HTmw4pWMUkasN2h/view

2. Choose, for example, "Once" from the dropdown. You see "CSV" is selected. It has "checked"
r1.png
3. Now, I choose "Excel". I click "Update". But, it doesn't get "checked". It's always "CSV" that's selected. This causes "CSV" selection to be always saved in the database.
r2.png
4. You can add more items by clicking "Add Report Delivery"

5. I did this to loop thru all the checkboxes. It looks like I get the correct radiobutton selected. But, how can I say
Schedules[' + i + '].IsExcelExport is selected and set it to true. I need the property "ISExcelExport" to to be set to true or false for radio1 and radio2

I have this. You can see it in Reporting.js
$('.schedule', '#scheduleArea').each(function (i, e) {

		console.log(i)

		console.log($('#reportBuilder .radio1:checked').val());
		console.log($('#reportBuilder .radio1:checked'));

		console.log($('#reportBuilder .radio2:checked').val());
		console.log($('#reportBuilder .radio2:checked'));

		$(e).find('.radio2')[0].name = 'Schedules[' + i + '].IsExcelExport';
		var r = 

Open in new window

0
Julian and LeakIM helped me with this. It works fine in Chrome and Edge but not in IE11.

1. You can get the code from here. Just click on page.html . Corresponding js file is Reporting.js
https://drive.google.com/open?id=1wq6DY6x2VJAeTKAtMV5U1SeYSiCuxPlI

2. I have this version of IE
i1.png
I'll go step by step

3. In Chrome or Edge; page loads and you see one row
p1.png
4. Click on "Add" and for example, add 4 rows
p2.png
5. Click Update and you see a pop-up showing 4. This is correct. I have js code in Reporting.JS
p3.png
Now in IE 11

1. Open page.html in IE. If you see the "blocked" message, click on it to see the first row
p4.png
2.  Add 4 rows and click Update. The popup shows and it shows 5 rows. This isn't correct
p5.png
3. Delete the rows and only have one. Click update and the popup has 2. Add 2 more rows and popup has 4. This isn't correct and my update to the database is messed up.
p6.png
4. Another example in my real code. I added and removed and even tho I have 2 rows, it shows 4

p7.png
I wanted to debug in IE but the screen freezes. That's why I added the alert messages. Reporting.js has more code that's not related to this example but I provided it just in case something in the rest of the code is messing this up in IE.

Edit - I just
0
I hope someone can help me with this. I spent too much time replacing what we had with jQuery Select2 and now I've been told that some users use IE 11

I'm using Select2 jQuery plugin https://select2.org/

1. You can get the code from here. Just click on page.html
https://drive.google.com/open?id=1HCYWerja1MTgMNLeUjkNygmQcuYneOg7

2. In Chrome and Edge, you can type whatever in the Select2 box and press enter and it takes it.

3. Now, open page.html in IE11.
 a. This is the IE version we have
i1.png
b. You might get a message at the bottom that content is blocked. Click it to unblock it.
i2.png
c. You see the Select2 textbox
i3.png
Now, in IE, you can't just type anything. It looks like it allows 2 characters. It's like something is stopping it from typing in it and pressing enter and taking what the user typed in.
I tried to capture it and you can see it here  https://drive.google.com/open?id=1r4YlU64Gtvcw-AGurBmUHEcOiCPAlgTx

If this is not fixable, I'll change the code to whatever the previous developer had...he had a regular textbox and user had to separate their entries by comma. I don't like this, tho.
0
How do I separate this "tue-09:00 AM-10:00 AM" in the format Start Time: 9:00 AM End Time: 10.00AM using angularjs?
I have table in which the day and time is getting stored in this ("tue-09:00 AM-10:00 AM" ) format, when I have to view the data I want it to be in the above format.
How can it be done?
0
I am having trouble jumping to a hashTag using RouterLink.

So this is my parent component.html
<div class="col-sm-12 text-lg-left">
            <app-enclosures #enclosure [notes]="objectRoot?.parent[0]?.notes?.notes" [files]="objectRoot?.parent?.files.files"
              [description]="description">
            </app-enclosures>

          </div>
        <div id="displayContent">
          <br>
          <app-display-content></app-display-content>
         </div>

Open in new window


now I am doing following under enclosure.html
<td class="text-small">
                <a routerLink="../enclosures" fragment="displayContent" *ngFor="let encl of general" (click)="onClick(encl)">{{encl}}&nbsp;&nbsp;</a>
          </td>

Open in new window


however, when I click on the 'encl' I am expecting it to take me to parent.component's '#displayContent' hashtag.

But doesn't look like it is happening.
0
OWASP: Threats Fundamentals
LVL 12
OWASP: Threats Fundamentals

Learn the top ten threats that are present in modern web-application development and how to protect your business from them.

I have a .net solution, with few projects. one of them is web site which is an angular project with an asp.net web api project as a backend.

when I compile the solution or when i try to build just the asp.net website , i get the following error. I have looked through the csproj file for all the projects , but can't find reference
to the following in any projects.

I googled it but didn't find anything helpful yet.

has anybody run into similar issue?

The CodeDom provider type "Microsoft.VisualC.CppCodeProvider, CppCodeProvider, Version=10.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a" could not be located.
0
I am implementing google map in Angular 5 using npm library googlemaps.
 
When trying to show route/path between 2 points using setDirections().The 2 points are shown but no route is drawn and getting "Directions request failed due to OVER_QUERY_LIMIT". I am unable to see the path
 
Following is the code used for showing route:
 
 
var mapProp = {
center: new google.maps.LatLng(22.0824, 82.1411),
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
this.map = new google.maps.Map(this.gmapElement.nativeElement, mapProp);
this.directionsDisplay.setMap(this.map);
this.marker1 = new google.maps.Marker({
map: this.map,
draggable: true,
position: { lat: 22.0717, lng: 82.1497 }
});
this.marker2 = new google.maps.Marker({
map: this.map,
draggable: true,
position: { lat: 22.0942, lng: 82.1257 }
});
google.maps.event.addListener(this.marker1, 'position_changed', this.update);
google.maps.event.addListener(this.marker2, 'position_changed', this.update);
this.lat1 = 22.0717;
this.lang1 = 82.1497;
this.lat2 = 22.0942;
this.lang2 = 82.1257;
this.Source = new google.maps.LatLng(this.lat1, this.lang1);
this.Destination = new google.maps.LatLng(this.lat2, this.lang2);
this.calculateAndDisplayRoute(this.directionsService, this.directionsDisplay);
var request = {
origin: this.Source,
destination: this.Destination,
travelMode: google.maps.TravelMode.DRIVING
}
this.directionsService.route(request, function (response, status) {
if (status === google.maps.DirectionsStatus.OK) {
new 

Open in new window

0
Julian and LeakIM helped me with this. I needed to make a change and fixed it with a line of code but I'm thinking there has to be a better way.

1. You can see the sample code here. Please download and click on page.html
https://drive.google.com/file/d/1DvgefA8CFju8bdp5o_icbVEiEKxcDbOP/view

2. When page loads, you see two rows
f1.png
3. Click on "add" and you'll see two rows. (Note: remove this line of code in Reporting.js to see it. This is the fix i put in)
newItem = newItem[0]; //************ this line of code fixes it but I don't think this is correct
f2.png
4. I came up with newItem = newItem[0]; by looking at the console and "newItem"
f3.png
I think a better way (you'll see my commented out code) is to check and see if there's a div with "filterItem". Then if there is, take the first one (or the last one) I couldn't get it working. If what I have is good, I'll keep the code.
0
I can't figure out why this error is happening (I'll keep working on it and if I figure it out, I'll post back).

You can see the sample code here. Please just download, unzip and click on page.html
https://drive.google.com/open?id=1K5WPaz373tdxeZ17Sj3-cws_pFNOvWzZ

1. Stay on tab "report name". Click on "update" and you'll see the jQuery error.  I put console.log to see the validation errors. It breaks on if (!$('#reportBuilder').valid())

e1.png
	var validator = $("#reportBuilder").validate();
	console.log(validator.errorList)
	console.log(JSON.stringify(validator))

	if (!$('#reportBuilder').valid()) //***** this is where it breaks
		return false;

Open in new window


2. Now, click on another tab and click "update". JS code goes past if (!$('#reportBuilder').valid()) .
e2.png
I don't know why this code breaks on the first tab only. How else can I debug this?
0
LeakIm and Julian have been helping me with this. I've made a change and can't figure out how to fix this.( If I come up with a fix, I'll post back)

1. You can see an example here https://drive.google.com/open?id=1CkUx0PtHwU8N8ycitNXJDf_Y5BaDIyrg

Just download and click on page.html

2. I'm using Select2 plugin

3. When page loads. You see the email field. This should be "select2". I'm attaching it like this, but it doesn't get attached as select2
$(".email1", schedRow).select2({ tags: true, selectOnBlur: true }); 

Open in new window


p1.png
4. Click on "Add report delivery" and you get a new row. Select, for example, weekly. Email address select2 works on this new row.
p2.png
5. Click on "Add report delivery" again and you get a new row. Select, for example , weekly again. Email address for the newly added row works but the previous one is not select2 anymore.

This is happening because with each new row, I do this
 $(".email1", schedRow).select2({ tags: true, selectOnBlur: true }); 

Open in new window

but the previous row's select2 is removed

Now that I'm posting this, I think the issue is using the class '.email1' and this is being built dynamically. I need to use a selector that doesn't change (Julian has explained this to me in 2 previous posts)  OR , do I need to loop thru and find the email1 and reattach select2?

I'll look at this again but any help would be great.
0
I got this code work. Page reloads using that href

function deleteConfirm(e)
	{
		
		var url = "@Url.Action("DeleteReport", "unit")/" + $("#linkId").val();
		$.post(url).success(function () {

			//$("#deletediv").removeClass('hidden');
			
			location.href = "@Url.Action("Reports", "Unit")";
			//e.preventDefault();
			
		});
}

Open in new window


Howcome this didn't work? location.href didn't get excuted

$.ajax({
			url: '/unit/DeleteReport',
			dataType: 'json',
			type: 'POST',
			async: false,
			data: { id: $("#linkId").val() },
			success: function(data) {

				console.log(data)
				location.href = "@Url.Action("Reports", "Unit")";
	
			},
			error: function(data) {

			}
		});

Open in new window


Now that I'm posting this question...I probably need to return success or something from the action?

public ActionResult DeleteReport(int id)
	    {
		    var ra = new ReportingAccess();
			
			    if (ra.DeleteReport(_ReportTypeID, CurrentUser.User.ID, id))
			    {
				    RemoveReportFromSession(id);
				    StashFrontendMessage(Normal.ReportingReportDeleted);
				   // ViewBag.Messages = Normal.ReportingReportDeleted;
				   return RedirectToAction("Reports", "Unit");
			    }
			    else
				    ViewBag.Errors = Normal.ReportingReportUnableToDelete;
		
		    return RedirectToAction("Reports", "Unit");
		}

Open in new window

0

Angular

589

Solutions

394

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.

Top Experts In
Angular
<
Monthly
>