Angular

580

Solutions

389

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

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
Angular Fundamentals
LVL 12
Angular Fundamentals

Learn the fundamentals of Angular 2, a JavaScript framework for developing dynamic single page applications.

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
CompTIA Network+
LVL 12
CompTIA Network+

Prepare for the CompTIA Network+ exam by learning how to troubleshoot, configure, and manage both wired and wireless networks.

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
I wanted to clear a text but I ended up doing these 2 lines of code and I'm not sure why I had to it (doubt what I have is correct)

1. I click on a button and copy the existing row. I want to remove the existing data (the data that was in the row I copied) that was in the input box

I used this but still saw the "value". I don't see it in the textbox but I see it still assigned to "value"

$("input[name='FilterValues']", newItem).val("");

Open in new window


s1.png
2.  I added this line and now the value is also cleared. Just want to understand this better

$("input[name='FilterValues']", newItem).val("");
		$("input[name='FilterValues']", newItem).removeAttr('value');

Open in new window


s2.png
0
As part of my code clean up of what the ex-developer has, I want to make sure this is good to leave as is or if there's a better (I'm looking for mainatable code) way of doing this

1. There are divs with classes and these divs are hidden/displayed based on what the user selects from a dropdown. I can leave it as is, if there isn't a cleaner way

s1.png
2. A change function is called and the divs are hidden and displayed like this

$(document).on('change', '#scheduleArea .schedule select.typeSelector', function () {

   .....

var scheduleDiv = $(this).parents('.schedule');
...
var classToDisplay = '';
		switch (value) {
			case 'O':
				classToDisplay = 'scheduleOnce';
				break;
			case 'D':
				classToDisplay = 'scheduleDaily';
				break;
			case 'W':
				classToDisplay = 'scheduleWeekly';
				break;
			case 'M':
				classToDisplay = 'scheduleMonthly';
				break;
			default:
				break;
		}
		if (classToDisplay != '') {
			$('.' + classToDisplay, scheduleDiv).removeClass('hidden');
			if (value != 'O') $('.endDate', scheduleDiv).removeClass('hidden'); // Don't display end date for Once runs
			$('.export', scheduleDiv).removeClass('hidden');
			$('.emailAddresses', scheduleDiv).removeClass('hidden');
			$('.timeZone', scheduleDiv).removeClass('hidden');
		}

Open in new window

0
Why use AngularJS instead of NodeJs

I would like to know why you should use AngularJS instead of NodeJS seeing that NodeJS can  fetch the Data from the Database server and present it to end user browser. I have seen some AngularJs videos where they use arrays and some code to present data on the browser, I have not seen any example where the Angular connect to the Database...
I thought probably NodeJs can do the same thing Angular does, with easier code.

Reading online, I see Angular is described as Framework ,whereas NodeJs is a Library...but do they achieve the same thing ?

Thank you
0
Become a Certified Penetration Testing Engineer
LVL 12
Become a Certified Penetration Testing Engineer

This CPTE Certified Penetration Testing Engineer course covers everything you need to know about becoming a Certified Penetration Testing Engineer. Career Path: Professional roles include Ethical Hackers, Security Consultants, System Administrators, and Chief Security Officers.

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
This is intersting that I didn't know. The thing is per this https://api.jquery.com/visible-selector/  the element should be visible. I see it in the DOM

 1. I have a page and I changed the design to have tabs
2. Original code didn't have tabs. It's one long page.
3. It does this

	var visibleSchedules = $(document).find('#scheduleArea .schedule:visible');

	if (visibleSchedules.length > 0) {...

Open in new window


4. With tabs (my redesign, when I'm not the corresponding tab... ".schedule:visible" is not visible

This is how I have it now:

t1.png
5. I thought instead of "visible", I should drill down to the dropdown in the div and check the selected value from the dropdown. If at least one not set to "select"...then I can loop thru this div like the old code. So, not look for "visible" because user might be on another tab

t2.png
I tried these but I get black for the what's selected in the dropdown

var visibleSchedules = $(document).find('#scheduleArea .schedule:visible');

         //********* tried this
	//var visibleSchedules2 = $(document).find('#scheduleArea .schedule').find('#Schedules[0].Type:selected').val();

       //******** tried this
	//var t = $('#Schedules[0].Type:selected').text()

	if (visibleSchedules.length > 0) {

Open in new window

0
I'm rewriting and improving some jQuery code that I have inherited from a developer who's not here anymore.

I got help from Leakim and Julian here and I'm using the same method (using Template) Previous question - long thread

1. I uploaded my sample code here https://drive.google.com/file/d/1d2Gn8UDfeHfXvn560b114i-5Ob2ZP8rJ/view

Just download, unzip and click on "page.html". The corresponding JS file is "Reporting.js"

2. When page loads, you'll see one row of dropdowns. Click "Add" and now you'll see two

e1.png
3. In the first row, select something from the first dropdown. The second dropdown in the first row is enabled. This is correct.
But, the second dropdown in the second row also is enabled. This is not correct. Why is this happening?

e2.png
4. There's some existing code that the ex-developer has in this section of
$(document).on('change', '#reportBuilder select.filterField', function () {...

Open in new window

of Reporting.JS.  I think something might be off in that section now that I'm using Template and divs. I'll debug that. I wonder if I need to have an ID on these dropdown? somehow say... if user selects something on this row...only make this row enable/disabled. All that code in the 'change' event is even needed? can it be simpilfied


EDIT I fixed it by changing the below code because I don't have "tr" and "table" anymore. Can that "change" function be simpilfied?
var operatorSelect = $('select.fieldOperator', $(this).parentsUntil('tr').next());

Open in new window


to this

var operatorSelect = $('select.fieldOperator', $(this).closest('div').next());

Open in new window

0
In Angular, Can I Create a Dynamic Table using Static and Dynamic Column header?


 
From the above example- Name and department are static content(hardcode values), 01.01.2015 , 01.02.2016, 01.03.2016 are dynamic content to be iterated using ngfor.
 
please provide solution in Angular 5
0
You can see my example here. Download and click on page.html.  https://drive.google.com/file/d/1Kt2CQwvTAdY0uojPf8sf7krVu6sEz61f/view

1. When page loads, I have one row with "And" and the "X" delete.
2. I can click on Add and keep adding divs

What I want to do is:
1. The first row, remove the X
2. When on the last row ( I can have as many rows as I want)...remove And

f1.png
I thought about finding the # of divs that has X and AND. If only 1, hide "X". But that's not going to work.

I think I need to drill down these divs but still not sure how to hide X and AND

f2.png
0

Angular

580

Solutions

389

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.