Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x

AngularJS

434

Solutions

288

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

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
Free Tool: ZipGrep
LVL 10
Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

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
Hi

In my Angular 2 application, i need to open a popup on button click where i can add  TO address and from address and attach file to the email and send emails..

Can you please provide me a sample code for sending emails in Angular application..
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
Tech or Treat! - Giveaway
LVL 10
Tech or Treat! - Giveaway

Submit an article about your scariest tech experience—and the solution—and you’ll be automatically entered to win one of 4 fantastic tech gadgets.

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
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'm learning how to unit test an Angular 2 application and I would appreciate some guidance here. In the function below, I have some code that connects to a SQLite database and runs a transaction. I am trying to understand how to unit test the parts in red (shown in screen shot). Can you please help me to understand how I would write tests that generate coverage?

I am using Jasmine 2.5.3, karma 1.5.0 and angular 4.1.3.

Thank you for advice and guidance.

runSqlTransaction(db: SQLiteObject) {
    this.db = db;
    return new Promise((resolve, reject) => {
      this.db.open().then((res) => {
        try {
          db.transaction(tx => {
            this.tx = tx;
            tx.executeSql(this.sqlQuery, this.params,
              (tx: any, res: any) => resolve({ tx: tx, res: res }),
              (tx: any, err: any) => reject({ tx: tx, err: err }));
          });
        } catch(e) {
          reject(e);
        }

      }).catch(e => {
        console.log('Is the database open failed', e);
      });
    });
  }

Open in new window


Coverage
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
I have a PuzzleCanvas object and I need it to contain a matrix of PuzzlePieces 8 columns by 5 rows.

I want this done inside the Component itself so that in the HTML for the PuzzleCanvas I can simply use forEach and iterate through a previously created matrix of components.

How do I do this?

Thanks
0
How to Use the Help Bell
LVL 10
How to Use the Help Bell

Need to boost the visibility of your question for solutions? Use the Experts Exchange Help Bell to confirm priority levels and contact subject-matter experts for question attention.  Check out this how-to article for more information.

I need to verify I can use automation to create a component, but get errors.

And On the Mac Terminal I also get a new command prompt. is this the CLI?

How do I call up the CLI from terminal?

What's wrong with my

$ ng new component './components/puzzlepiece
The command "new" has an option without the required type and name fields.
Error: The command "new" has an option without the required type and name fields.
    at Class.validateOption (/Users/RA/Documents/Git/PuzzlePeace/node_modules/@angular/cli/ember-cli/lib/models/command.js:377:13)
    at Array.map (<anonymous>)
    at Class.registerOptions (/Users/RA/Documents/Git/PuzzlePeace/node_modules/@angular/cli/ember-cli/lib/models/command.js:163:27)
    at getOptionsTask.run.then (/Users/RA/Documents/Git/PuzzlePeace/node_modules/@angular/cli/commands/new.js:95:18)
    at <anonymous>
$ ng new component './components/puzzlepiece
> pwd


My installation on the Mac looks good, I think:

$ ng -v
    _                      _                 ____ _     ___
   / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
  / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
 / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
/_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
               |___/
@angular/cli: 1.4.5
node: 8.6.0
os: darwin x64
@angular/animations: 4.4.4
@angular/common: 4.4.4
@angular/compiler: 4.4.4
@angular/core: 4.4.4
@angular/forms: 4.4.4
0
I need to ad the following styles to my Component and created a new CSS file for it, with the same filename name and folder location as the Typescript file and the HTML file for that Component.

How do I format the CSS in the CSS file so it styles the Component?

width="200" height="100" style="border:1px solid #000000;



Thanks.
0
This makes no sense to me. I created CanvasComponent correctly, I think. I did it manually since the automtation failed me on another questionI posted,

c:\Dev\pp\src\app\app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { CanvasComponent } from './components/canvas/canvas.component';

@NgModule({
  declarations: [
    AppComponent,
    CanvasComponent    
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Open in new window


c:\Dev\pp\src\app\components\canvas\canvas.component.html
<h1>Hello from the Canvas1</h1>

Open in new window


c:\Dev\pp\src\app\app.component.html
<p>Hello from App</p>
<canvas></canvas>

Open in new window


c:\Dev\pp\src\app\components\canvas\canvas.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'canvas',
  //templateUrl: './canvas.component.html',
  template: `<h1>Hello from the Canvas2<h1>`
})

export class CanvasComponent {
  title = 'Title';
}

Open in new window



All I get is "Hello from App"

Chrome
Why don't I see?

Hello from the Canvas2

You can see I have commented out:
  //templateUrl: './canvas.component.html',

since that failed also.

Thanks for any help you can provide.

New news...

canvas does show in the debugger...


More new news...

When I place a <br> before <canvas></canvas>
the canvas does not show up on the pages. The same thing happens when I remove:

<p>Hello from the App</>


Lastly, I do see the message in the debugger...

canvas appears on the pageScreen-Shot-2017-10-09-at-11.25.16-P.png
0
I THINK I have a good installation of Node and Angular 4...here's why:

PS C:\dev\pp\src\app\components> ng -v
    _                      _                 ____ _     ___
   / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
  / ? \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
 / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
/_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
               |___/
@angular/cli: 1.4.5
node: 8.6.0
os: win32 x64
@angular/animations: 4.4.4
@angular/common: 4.4.4
@angular/compiler: 4.4.4
@angular/core: 4.4.4
@angular/forms: 4.4.4
@angular/http: 4.4.4
@angular/platform-browser: 4.4.4
@angular/platform-browser-dynamic: 4.4.4
@angular/router: 4.4.4
@angular/cli: 1.4.5
@angular/compiler-cli: 4.4.4
@angular/language-service: 4.4.4
typescript: 2.3.4
PS C:\dev\pp\src\app\components>

but I can not generate a new component.

PS C:\dev\pp\src\app\components> ng g component [canvas]
The command "generate" has an option without the required type and name fields.
Error: The command "generate" has an option without the required type and name fields.
    at Class.validateOption (C:\dev\pp\node_modules\@angular\cli\ember-cli\lib\models\command.js:377:13)
    at Array.map (<anonymous>)
    at Class.registerOptions (C:\dev\pp\node_modules\@angular\cli\ember-cli\lib\models\command.js:163:27)
    at getOptionsTask.run.then (C:\dev\pp\node_modules\@angular\cli\commands\generate.js:98:18)
    at …
0
I plan a simple Angular website with little user data needing to be persisted, at first. Username, Email, personal preferences, etc.

What of the value of using Firebase versus me configuring a MySQL database? Clearly, there seems to be no back-end service needing to be written, and that is pretty awesome.

Is this NoSQL?

What other advantages are there? What other free alternatives are there?

Thanks
0
I use Visual Studio Code on Windows to code Angular, with a Node server running and Chrome as the browser.

Is there a way to set breakpoints?

I assume Chrome breakpoints work the same as with Javascript, with no issue.

I also know that Visual Studio debugs Javascript (with breakpoints) for the old Internet Explorer.

What are my options for setting breakpoints easily with Angular? I do not find Chrome easy since I need to find the file, find the line number, etc. I much prefer using Visual Studio since it's more like a WYSIWYG type of setting breakpoints.

Suggestions?

Is there a modern browser which works with Visual Studio the way VS once suppoted Internet Explorer?

Thanks
0

AngularJS

434

Solutions

288

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.