Go Premium for a chance to win a PS4. Enter to Win

x

AngularJS

447

Solutions

297

Contributors

AngularJS is an 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–viewmodel (MVVM) architectures, along with components commonly used in rich Internet applications. AngularJS is the frontend 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

Hello - I'm trying to learn a bit about using Angular. I have a specific learning exercise I am trying to figure out.

I am super new to Angular. I have been working with one of the tutorials on the Angular site in my down time over the last day or so...but very new to using it.

My main question for this thread is working with/trying to create an Angular table. Specifically one structured similar to the layout for the code below.
<table style="width:75%">
  <tr>
    <th>Firstname (e.g. Static Field Label)</th><td>Clark (e.g. firstName pulled from JSON file)</td> 
    <th>LastName</th><td>Kent</td>
  </tr>
  <tr>
    <th>Job</th><td>Reporter</td>
    <th>ID</th><td>94</td>
  </tr>
 
</table>

Open in new window




I am not seeing a lot of examples with a table structured similar to this (where its more of a profile grid instead of a straight list of data.

*Two other bits of functionality I will be researching for the table is to pull the info to be displayed from a JSON file.
*A search box to determine which record to display in the profile grid using an ID field.

Here are some sample values for the JSON file:

[
       {
           "firstName": "Clark",
           "lastName": "Kent",
           "job": "Reporter",
           "id": 20
       },
       {
           "firstName": "Bruce",
           "lastName": "Wayne",
           "job": "Business Owner",
           "id": 30
       },
       {
           "firstName": "Peter",
           "lastName": "Parker",
           "job": "Photographer",
           "id": 40
       },
       {
           "firstName": "Tony",
           "lastName": "Stark",
           "job": "Business Owner",
           "id": 25
       }
   ]

Open in new window



Any tips or suggestions to get me pointed in the right direction would be greatly appreciated!!

Thanks,
0
Free Tool: IP Lookup
LVL 11
Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

1. I have this in MVC routeconfig
 public static void RegisterRoutes(RouteCollection routes)
        {
            routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

           
            routes.MapRoute(
                name: "Default",
                url: "{controller}/{action}/{id}",
                defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }
            );


        }

Open in new window


2. I have this Controller

  // [HttpPost]
        public ActionResult Index(string formId)
        {

            ViewBag.FormId = formId;
            return View();
        }

Open in new window


3. This works and when I get to the controller, I see "formId"'s value. The URL shows as ?/index/1

  $scope.openForm = function (formId) {

            //console.log(JSON.stringify(formId))

          
            window.location = "/displayform/index/?formId=" + formId; //https://stackoverflow.com/questions/37031143/asp-net-angularjs-how-to-click-on-link-and-route-to-controller-method-with-id

        };

Open in new window


How come these don't work...I step thru it and 'formId" comes out as null. I added HttpPost as well to the MVC Controller. what am I missing?


 window.location = "/displayform/index/"+ formId;

Open in new window



window.open('/displayform/index/' + formId, '_self', false);

Open in new window

0
I have a side menu and I click on a link. I want to redirect the user to another page and pass a parameter.

1. In Razor, I do this

 <button ng-click="openForm(row.Id)"  class="btn btn-primary btn-border btn-rounded-20 btn-ef btn-ef-4 btn-ef-4b mb-10">{{row.FormName}}<i class="fa fa-arrow-right"></i></button>

Open in new window


2. In AngularJS controller, I have this
 $scope.openForm = function (formId) {

            //console.log(JSON.stringify(formId))

            //$http({
            //        method: 'POST',
            //        url: '/displayform/index',
            //        data: JSON.stringify(formId),
            //        contentType: "application/json",
            //        dataType: "json"

            //}
               
             

            //    ).then(function () { });

          //  window.open('/displayform/index/' + formId, '_self', false);

            window.location = "/displayform/index/?formId=" + formId; 

        };

Open in new window


3. In C# controller
 // [HttpPost]
        public ActionResult Index(string formId)
        {

            ViewBag.FormId = formId;
            return View();
        }

Open in new window


4. The URL looks like this when the user is redirected
http://localhost:63410/displayform/index/?formId=1

Is there a better way of doing this? I wanted the URL to look like this but couldn't get it working...the passed parameter comes out as null http://localhost:63410/displayform/index/1
0
I am hosting an app in Firebase hosting.  When I run it locally on localhost:4200, The .js bundles are loaded into my index.html.  When I build and deploy to firebase hosting, it just gets the index.html file but does not get the sources (the .js bundles) Am I missing a step?
0
I am trying to install the following for a new application:
Angular5
Bootstrap4
Firebase and Firestore
Firebase Hosting (probably)
Firebase Auth

I can get everything installed but there are dependency issues.  I think Node.js 9.0.0 does not work with NPM 5.5.1 and the Angular/cli.  Node.js 9 comes with NPM 5.5.1 so I'm not sure what the problem is.  I tried to update my package.json file with v. 5.5.1 from 5.0.0 but that causes even more issues.  I know this is all new but has anyone found a way to work around it?  Different versions?
0
I'm learning Angular 4 and following examples to set up an Angular 4 files with VS 2015

1. I installed node.js and nmp

2. Installed Typescript 2.2 from here https://marketplace.visualstudio.com/items?itemName=TypeScriptTeam.TypeScript22forVisualStudio2015

3. Typescript folder is there
folder
4. I did a search for "typescript" in VS code and I see these
vs2
5. Checked VS and it shows 2.2
vs
5. But when I type tsc -v in command prompt, I see this version. Why?

command prompt
0
I suddenly need to buy a new PC and have been doing Angular work on a MacBook.

It seems Windows PC are mainly  Windows 10.

What version of windows is needed to install Node? Angular? SQ Server and Visual Studio?

Thanks
0
I have a .Net web form that is trying to use Angularjs Schema Form to display a form and pass it back to server side.

I can display the form, but am getting unknown object errors when trying to validate the form.

Please help as I've worked too long on this for a silly mistake with scopes.  THANK YOU.

I have enclosed my .cs and aspx files.
Default3.aspx
Default3.aspx.cs
0
I have an existing html page with bootstrap 3 snippet to open modal popup as below

link to open modal pop up

<a href="#" class="fa fa-search FA_Ico mT5" aria-hidden="true" title="SearchOrg" data-toggle="modal" data-target="#SearchAccountModal"></a>

Open in new window


modal pop up

<div class="modal fade modal-xl" id="SearchAccountModal" tabindex="-1" role="dialog">
	//additional code 
</div>

Open in new window


when I click  the above link , modal pop up opens fine....no problem.

Now my question is : What would be the angularjs way to open the same modal pop up ?

I'm using angularjs 1.3
0
Here i the CSS I use to create the dark corner in the upper-right.


.dog-ear {
	position: absolute;
	top: 0;
	right: 0;
	height: 10px;
	width: 10px;
	background: linear-gradient(45deg, #333 0%, #333 50%, #fff 50%, #fff 100%);
}

Open in new window



But It sometimes looks choppy.

Choppy line
Is there a different way to do this?
0
Vote for the Most Valuable Expert
LVL 7
Vote for the Most Valuable Expert

It’s time to recognize experts that go above and beyond with helpful solutions and engagement on site. Choose from the top experts in the Hall of Fame or on the right rail of your favorite topic page. Look for the blue “Nominate” button on their profile to vote.

I added a class to a div, and verify the booelan's working.  But, the ng-class is failing.

    <div ng-class="{ 'dog-ear' : isDogEared }"></div>

Open in new window


Inside the Typescript template I have:
@Output() isDogEared:boolean;

  dogEarIndexes: number[];

  constructor() 
  { 
    this.dogEarIndexes = [ 1,3,5 ];
  }

  ngOnInit() {
    this.imageFilename = "PuzzlePiece_Maps_" + (this.value.id + 1).toString() + ".gif";
    
    this.id = this.value.id;
    this.isDogEared = this.dogEarIndexes.indexOf(this.id) > -1;
    console.log('Id:'+this.id+" - " + this.imageFilename + " isDogEared="+ this.isDogEared.toString());    
  }

Open in new window


and the page does not generate any errors, and I verified the boolean values are properly set in ngOnInit()

Booleans Work OK

What am I missing?
0
I have a Puzzle Piece class but need an additional class which makes the image look like the upper right corner of the page is folder over.

.puzzle-piece {
    width: 12.5%;
    float: left;
    box-sizing: border-box;
    position: relative;
    border-bottom: 2px solid blue;*/
    text-align: center;
    z-index: 10;
}

So, when I add that class, I want to see what looks like a small black triangular corner being added to the image in the upper right corner.

How do I do that in CSS?
0
I hope to post a sample application which displays a problem I am having and need to find what aspects I need to create for this. It would mainly be for posts on EE but could be used to share my code for other purposes.

Can you suggest one?

I create a GitGub account and use Git to put the latest version of my site to GitHub.

What if two people want to make an alteration to the code I post there? When someone makes a change, is there a way to auto-fork the repo?
0
I am trying to understand this article:

http://www.codemag.com/article/1705021

and how they fulfill the WebAPI mentioned under the heading:

"Create Web API"

I see they stat with an empty C# Controller, but can not find what exactly they mean by WebAPI.

I am not understanding what is meant by the term.

Please explain.

Thanks
0
Can't get my angular app and controller working on Razor @Html.ListBoxFor.
The debugger is never hit and the alert is never shown, when I click in the listbox that creates the option -> select tags.

Where am I going wrong?

<div class="row" id="frmUsersSection" ng-app="SelectLocalUsersApp">
        <div class="col-xs-3" ng-controller="SelectLocalUsersAppController">
            <h4 style="margin-bottom: 2px;">Lokale brukere</h4>
            @Html.LabelFor(model => model.UsersSelectList, new { @style = "margin-top:15px;" })
            @Html.ListBoxFor(m => m.SelectedUserIDs, Model.UsersSelectList, new { ng_change = "onSelectionChange()", ng_model = "selectedUser", @style = "margin-bottom:5px;", size = "15", @id = "systemComponents.selectUserLogonName", @class = "form-control input-sm", data_toggle = "tooltip", data_placement = "bottom", @title = "Velg bruker" })
            <script type="text/javascript">
                var selectLocalUsersApp = angular.module('SelectLocalUsersApp', []);
                selectLocalUsersApp.controller('SelectLocalUsersAppController', function selectLocalUsersAppController($scope) {
                    $scope.messagePanel = '#messagePanel';
                    $scope.selectedUser = '';      
                    $scope.onSelectionChange = function () {
                        alert(selectedUser);
                        debugger;
                    }
                });
            </script>
        </div>
    </div>

Open in new window

0
I am unsure about how to change the styling on my PuzzlePiece Component. I draw an image inside of a span.

<div class="puzzle-piece">
    <span><img src="{{ imageFilename }}" /></span>
</div>

Open in new window


with the following styling...
.puzzle-piece {
    width: 12.5%;
    float: left;
    box-sizing: border-box;
    background-color: #007acc;
    position: relative;
    padding-bottom: 12.5%;
    border-right: 2px solid blue;
    border-bottom: 2px solid blue;
    text-align: center;
    z-index: 10;
}
.puzzle-piece span {
    position: absolute;
    top: 50%;
    left: 50%;
    font-size: 3em;
    font-family: 'Arial';
    transform: translateX(-50%) translateY(-50%);
    color: rgba(255,255,255,5);
}

Open in new window


In order to make the edges touch for each of the puzzle pieces, I needed to make the width of the puzzle 100%:
.puzzle {
    width: 100%;
    margin: 0 auto;
    border-top: 2px solid blue;
    border-left: 2px solid blue;
}

Open in new window


But I prefer a lower width, like 80%.

Full screen
Also, I'd like the image to maintain its integrity, and stay tight, even when the browser grows.
centered
Lastly, does the span style control the image style? Or does img need its own styling?
0
Code snippet from PuzzleCanvasComponent where I fill the PuzzlePieceComponent array.
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;
        index++;
      }
    }
  }

Open in new window


I want to set the "id" property there, but this line does nothing:
        this.pieces[index].id=index;


So I tried to use the HTML template for PuzzleCanvasComponent, but have the syntax wrong.
<div class="puzzle">
    <puzzle-piece *ngFor="#piece of pieces; #i=index" [value]="piece" [id]="i"></puzzle-piece>
</div>

Open in new window


with the following properties created in the TS file
export class PuzzlePieceComponent implements OnInit {
  @Input() value:PuzzlePieceComponent;
  @Input() id:Number;
...

Open in new window


I'd prefer if the first method could be made to work, especially since I want to expand the number or properties set in
ngOnInit() beyond just the id.

Is method #1 fixable? Or must iI use the second method? If so, what is the syntax?
0
I have a little Angular app with two small Components, PuzzleCanvas and PuzzlePiece. I have a sample number of 9

PuzzlePieceComponent with a style CSS I just can not update. So, as a result, all PuzzlePieceComponents are drawn over the other.
import { Component, OnInit, Input } from '@angular/core';
declare var jquery:any;
declare var $ :any;

@Component({
  selector: 'puzzlepiece',
  styles: [ ],
  template: `
     <img id="#PuzzePiece{{ id }}" 
     style="position:absolute; display:block; width:100px; height:100px; left:12px; top:12px;"
     src="../../../assets/images/PuzzleCompleted_{{ id+1 }}.gif"/>
  `
})


export class PuzzlePieceComponent implements OnInit {
  title = 'Puzzle Piece';
  @Input() data:PuzzlePieceComponent;
  @Input() id:Number;
  //pieceStyling:string=this.getPieceLocation();
  constructor() { }

  ngOnInit() {
    this.id = this.data.id;   
    console.log("ID:" + this.id) 
  }

Open in new window



PuzzleCanvasComponent is constructing the PuzzlePieceComponents correctly
import { Component, Input, OnInit } from '@angular/core';
import { NgFor } from '@angular/common';
import { PuzzlePieceComponent } from '../puzzlepiece/puzzlepiece.component';

@Component({
  selector: 'puzzlecanvas',
  styles: [`canvas { width: 800px; height: 500px; border: 2px solid black; }`],
  template: `<canvas></canvas>
             <puzzlepiece *ngFor="let piece of pieces" [data]="piece" [id]=index></puzzlepiece>`
})

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

  constructor() { }

  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;
      }
    }
  }
}

Open in new window



The PuzzleCanvasComponents are being written one over the other...
Overwriting

But I have verified all 9 PuzzlePieceComponents are loading
Creation
I feel like I have tried everything. Notice I can use the {{}} for property binding when it comes to setting the ID and the src for image.

I have a jquery (Plan B) solutin that also does not work. That question is here:
https://www.experts-exchange.com/questions/29062600/Angular-CSS-need-to-resort-to-jquery.html

It seems like I reached a limiting factor in the Javascript methodology. Is that possible?

Is there a different place in the page life-cycle, besides ngOnInit(), where I can place update logic?

My project is stuck until I can get past this.

Thanks.
0
I want to make it easy to run my Angular app so it's easier to show the problem I am having. But I just noticed the repo contains tons of node packages, brining the size of this little Angular program (with two Components) to 172 MB.

I did not want to commit and push this without asking how Plunker works and what options I have regarding all those node modules.

Thanks.
0
Free Tool: Site Down Detector
LVL 11
Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Using Angular alone, I have trouble setting the "left" and the "top" for the following image tag. But you can see I am successfully updating  the src value with a variable called "id."

 template: `<img id="#PuzzePiece{{ id }}" style="left:10px; top:10px; position:absolute; width:100px; height:100px;"
                  src="../../../assets/images/PuzzleCompleted_{{ id+1 }}.gif"/>`
})

So I am trying to use jquery with no luck. I am just doing a test, trying to get left and top set to 100. I verified the jquery is correct.

The page thrown no errors so I assume I installed jquery correctly.


  ngOnInit() {
    this.id = this.data.id;    
    this.updateImageCoordinates();
  }

  updateImageCoordinates()
  {
    var imageId = "#PuzzlePiece" + this.id.toString();
    $(imageId).css({"left":100,"top":100});
  }
 
What am I missing?

Thanks
0
when I update this:

constructor()
{
}
 
to be this:

constructor(public _id:Number, public _X:Number, public _Y:Number)
{
}

I get the attached error:

error
and the page fails to load.

Clearly, the declaration of PuzzlePieceComponent in the app.module.ts Module is setting up the expectation for a version with no parameters. How do I et around this?

Are these params needed if I use:

  @Input() id:Number;
  @Input() X:Number;
  @Input() Y:Number;

Thanks.
0
I am successfully setting these values inside the PuzzlePiece component...

  @Input() id:Number;
  @Input() X:Number;
  @Input() Y:Number;

The ID is used to successfully load the correct image file. But I do not know how to draw that image at the X and Y values.

How do I pass a component's value to the CSS?
0
I need to load an image based on a generated filename but find the following logic fails.

@Component({
  selector: 'puzzlepiece',
  styles: [],
  template: '<img src="../../../assets/images/PuzzleCompleted_" + {{ id }} + ".gif" />'
})

Instead of displaying the image, the path name variable is displayed on the page, thusly:

path name
but when I hard code the filename, it works:

@Component({
  selector: 'puzzlepiece',
  styles: [],
  template: '<img src="../../../assets/images/PuzzleCompleted_1.gif" />'
})

hard coded path
How do I use a variable to set the "src" for an image inside an HTML template?
0
I have a PuzzleCanvas component and a PuzzlePiece component. Each PuzzlePiece will persist its location in the matrix of PuzzlePieces.

For example, a PuzzlePiece may be on row 2 of 5 rows and be on column 3 of 8 columns.

How do I transpose this information into the X, Y coordinates for each PuzzlePiece?

Can the PuzzlePiece component use those variables row and column as it calculates where that particular PuzzlePiece should be drawn.

Thanks.
0
I need to create a matrix of child Components inside the parent Component, which creates them. Meanwhile, I need to pass in a few values in init of the child Component, like an Index number and an image filename.

How do I pass in parameters as I create these child Components?

Thanks
0

AngularJS

447

Solutions

297

Contributors

AngularJS is an 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–viewmodel (MVVM) architectures, along with components commonly used in rich Internet applications. AngularJS is the frontend part of the MEAN stack, together with Node.js runtime, Express.js backend framework and MongoDB database.

Top Experts In
AngularJS
<
Monthly
>