Angular

599

Solutions

405

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

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
JavaScript Best Practices
LVL 12
JavaScript Best Practices

Save hours in development time and avoid common mistakes by learning the best practices to use for JavaScript.

Is Jquery outdated? what's the new technology that has replaced JQuery? Is it Bootstrap, Angular or React?

FYI, I don't have enough knowledge on Bootstrap, Angular or Reactjs hence am trying to determine what is the latest that I should be using on newer web applications.

Thanks for the info.
1
Syntax similarities and differences between Angular and React?

I am taking a crash course in React and a refresher in Angular. I worked with Angular 4, but would be nappy to start seeing Angular 6 syntax.

I am curious to see what is the same between React and Angular and what is different, syntactically.

Any suggestions where I can find that?

Thanks
0
What does Redux do for React and Angular?

Please give some specifics about what exact state Redux is managing and how it works.

Thanks.
0
Need a crash course in React

I have programmed in Javascript for years and even used Angular 4 on a short project, and loved it. But, it seems employers want React and will pay for it.

So, I need a crash course in React.

What can you suggest?

Thanks.
0
Choosing a Javascript SPA Framework

I have coded Javascript and seen the problems with code bloat which can make the code buggy and hard to enhance. Then, I saw how Angular 4 solved this problem.

What kinds of things cause one framework to be better than another, for a particular purpose? I guess this would involve not only the front-end capabilities, but also the back-end code clarity and modularity.

I am interested in seeing some comparisons between Angular6, React, KendoUI and any others you want so discuss.

Thanks
0
Is React the right technology for me to learn right now?

I am a C#.NET Full Stack developer with some experience in Angular 4.

I've been out of the job market for 9 months as I worked on private projects only tangentially related to web development and social media. But the next job could be me back as a
software engineer or a Sr. Software Engineer, my usual title.

I feel that React is key. What are your thoughts?

How hard might it be for me to do a crash course in React?

What are some good training sites for that?

Thanks.
0
We want to reskin our application (ASP.Net , C#, JQuery) using this template  https://themeforest.net/item/minotaur-angular-admin-dashboard/19319935

That template comes with Angular and jQuery but we're going to use the jQuery version.

I want to replace our CSS with the template's CSS and rework the pages and reskin.

We have a new guy on our team who's worked with Knockout. He said something like we can wire up Knockout and spit out Razor pages with the new look-and-feel/css.
Anyone has done something like that? where can I find more info?
0
We are trying to POST to a WCF REST method. We can successfully POST using SoapUI, Postman, and YARC but when we try in Angular 5 I'm receiving a NULL object.

Client code:
    const headers: any =  {'Content-Type': 'application/json'};
    return this.ajax.request<any>({
        url: url,
        method: method (POST),
        headers: headers,
        options: {
            body: JSON.stringify(req.body)
        }
        });
    }

    public request<T>(req: AjaxRequest): Observable<HttpEvent> {
        return this.http.request<T>(req.method, req.url, req.options)
    }

    //this.http = HttpClient

    // Component
    public onNext(event: any): void {
        this._saveInfo(getInsertDmgReqPayload({
            data: event.value,
            dmgInfo: this.responses['dmg'],
            emailId: this.util.getQueryStringValue('uname')
        }));

        this.util.navigate('education');
    }

    private _saveInfo(data: any): void {
        this.appraisal.request('saveDmgInfo', null, {body: data})
        .subscribe(v => {
            console.log(v);
        });
    }

Open in new window


Server-side logic:
// WCF Interface definition
    [OperationContract]
    [WebInvoke(Method = "POST", RequestFormat = WebMessageFormat.Json, BodyStyle = WebMessageBodyStyle.Bare)]
    Result InsertDemographicInfo(Demographic d);

    // Service code
    public Result InsertDemographicInfo(Demographic d) // The Demographic object is null when posting from Angular
    {
        Result result = new Result();
        try
        {
            DemographicFactory.InsertDemographicInfo(d);
            result.Status = "Success";
        }
        catch (Exception ex)
        {
            result.Status = "Fail";
            result.Message = ex.Message;
        }
        return result;
    }

Open in new window


Web config:

Open in new window

0
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
HTML5 and CSS3 Fundamentals
LVL 12
HTML5 and CSS3 Fundamentals

Build a website from the ground up by first learning the fundamentals of HTML5 and CSS3, the two popular programming languages used to present content online. HTML deals with fonts, colors, graphics, and hyperlinks, while CSS describes how HTML elements are to be displayed.

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
Introduction to R
LVL 12
Introduction to R

R is considered the predominant language for data scientist and statisticians. Learn how to use R for your own data science projects.

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

Angular

599

Solutions

405

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.