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

I want to be able to insert text that is chosen by a user from a pop-up, and insert it into the caret position in a content editable div. I'm wondering how I could do that (specifically how do I get the caret position, and ensure that the caret position is not lost when the user is interacting with the pop-up) ?

If you could provide sample code that would be very helpful.
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.

Hi Experts,
I'm working on an angular 7 project that requires text field (textarea)  to capture information along with emoji support. I've had a look at some of the existing libraries and thought that quill editor (exposed via ngx-quill) seemed to tick the boxes, it has a quill-emoji extension. The content created using this textarea will also be exposed via a mobile application.

I have managed to get most of the work completed, but I'm suspecting that the CSS is not being loaded properly (see image) since the pop-up is not rendered properly and the emoji's are rendered as the characters instead of the images etc...

screen grab of what is being rendered

I wanted to find out  :
Whether Quill is best choice in my use case (or whether there are any alternatives that are light weight)
What should I store in my db (so that it can be exposed in a mobile application - flutter) - i.e should I store just the quill data structure, the innerhtml, or both. What would make it easier to expose this via a mobile application ?
If there was another way to handle the emoji button (instead of displaying a toolbar) ?
0
Hi ,

How to setup a dynamic Link URL in the deploying dist folder?

I have created a test application with http service. In that application i have a detailed view page link ( <a href="test_server_URL"> Detailed View </a>). In this anchor tag i have the test server URL Link , i need to change this before applying in live server. How can it be done. I planning to change this as "Live_server_URL" and build the new dist folder with " ng build --prod " command. is this is the right way or else please guide me. Thank You.
0
I have a side project that I want to rewrite on my own time. I want to use ASP.Net Core and Angular as front end.

I'm reading about the latest version of Angular https://angular.io/guide/releases

Is it Angular 7 but the stable version is 6?
0
Hello,

  Need some guidance or sample code on how to build a calendar in Mobile.

I have a mobile app (cordova) angular 1 and I have to build a page with a calendar widget where user can create event. It should be  standalone pure angular/JS widget.

I have attached an image of calendar that I need to build

Thanks for your help
0
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
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
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.

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
I am just getting started with Angular (https://angular.io).

What I notice is every time I create a new project using the ng new myproject  (e.g. ng new angular-tour-of-heroes), it creates a (nodes_module) directory with like over 20,000 files.

I understand that in some cases you can set different settings that don't require all of the same nodes so that would create a different set of files for nodes_module.

But if I have multiple projects that all will use the same basic set of files, is there a way to share the nodes_module?

It seems that if I'm working on ten different projects at once that's an awful lot of files and disk space that is identical...

Is there a space saving option?

Also, if this is the best way to do this, is there a best practice for how to archive old projects.  In other words, if I have a project that I work on and turn over to a client, I no longer need it on my drive taking space. But if I want to save it in case the client wants me to replicate it again... is it okay just to save the src files or do I need to save the whole thing including the 24K+ nodes_miles?

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
How to do server side pagination for a Angular with Play framework application ?

Looking for a very good example with source code

Please kindly advise.
0
We have around 10,000 rows in table which needs to be show in the browser. The example given in https://datatables.net/extensions/scroller/examples/initialisation/large_js_source.html shows we can show 50,000 records very quickly

We are using Angular with ng-repeat which takes 2 minutes to load the table. We have created 5 columns. In which one of the column has a condition options which will be enabled based on certain conditions for each rows. Whenever we add few options to the button it takes more time

example, edit, delete, view etc., in the action button which is part of a column

We observed whenever we add option along with the ng-repeat with the options takes huge time to render the table.

How to speed up the rendering time ??? Please advise.

Thanks.
0
Hi all,
in order to translate my page and in according with this tutorial https://angular.io/guide/i18n I done the following simple operations but I don't see any translated texy. Why? Thank you very much!

1) Translation definitions. In the new folder src/locale I created the files messages.en.xlf and messages.it.xlf, with the following code (obviously it changes the target for each language):

    <trans-unit id="introductionHeader" datatype="html">
       <source>placeholder</source>
      <target>Ciao i18n! (it-IT)</target>
      <note priority="1" from="description">An introduction header for this sample</note>
      <note priority="1" from="meaning">User welcome</note>
      <target state="new">bye bye</target>
    </trans-unit>

Open in new window


2) Tag definition. In my html page I insert the following tag, with a placeholder:

    <h1 i18n="@@introductionHeader">
    	placeholder
    </h1>

Open in new window


3) In angular.json file, I insert the following rows:

   
 "architect": {
            "build": {
              "builder": "@angular-devkit/build-angular:browser",
              "options": {
                "outputPath": "dist/mobile-client",
                "index": "src/index.html",
                "main": "src/main.ts",
                "polyfills": "src/polyfills.ts",
                "tsConfig": "src/tsconfig.app.json",
                "i18nFile": "src/locale/messages.it.xlf", //This
                "i18nLocale": "it",                       //This
                "i18nFormat": "xlf",                      // This
                "assets": [
    (...)

Open in new window


Then I tried to build and serve but I don't see the translated text "bye bye". How can I solve it? Thank you very much!
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,
from my Angular 6 form I should send some data reproducing the same configuration which I have in Postman (I send a screenshot with the complete configuration: not "form" but raw / Json).

How can I do this? Thank you very much. I searched some solutions but I found example only in other cases.

registration.png

EDIT I try to edit to make my question more clear (I saw the -1 score, sorry if it is not clear). I have a set of data already retrieved from my Angular 6 / Material Design form and now I would sent this data to my backend (localhost:8080/something...). The configuration for this http post operation is in the attached screenshot: in my body, I choosen raw / Json options and all works correctly. Now, I should reproduce the same sent action also in my typescript component. How can I this request make? I tested some solutions but without any success. Thank all!

This is my code which doesn't work:


public login() {

        let userPassword = this.registrationForm.get('password').value;
        let userLogin = this.registrationForm.get('email').value;
        let userLangKey = 'en';

        const transferObject = {

            password: userPassword,
            login: userLogin,
            langKey: userLangKey
        }

        //JSON.stringify(transferObject);

        const req = this.http.post('http://localhost:8080/api/register/', {
            password: userPassword,
            login: userLogin,
            langkey: 

Open in new window

0
Why Diversity in Tech Matters
LVL 12
Why Diversity in Tech Matters

Kesha Williams, certified professional and software developer, explores the imbalance of diversity in the world of technology -- especially when it comes to hiring women. She showcases ways she's making a difference through the Colors of STEM program.

I am trying to edit a form in Angular 6 + Material Design. In the above code, I have 1 problems.

I would change the fa-envelope icon and I have searched in the Material Design folder, according to the tutorial I found. But no icon info or link was there; how are icons in material design managed? How can I change it?

Thanks all

    <form (ngSubmit)="login()" [formGroup]="registrationForm">
    	<div class="mt-4">
    	<mat-icon matPrefix fontSet="fa" fontIcon="fa-envelope" class="fa-24px text-center mr-3"></mat-icon>
    	<mat-form-field class="w-100">
    	   <input type="email" formControlName="test" matInput placeholder="Deine Name" required="required">
    	</mat-form-field>
    (...)

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
How  can I  resolve  this Error?I am a newbie in Graphql..I am trying  to call  graphql  API in angular.Below is my  code

export type DataTagsNames = {
	DATA_TAG_NM:String;
	DATA_TAG_ID:String;
	DSPLY_LINE_CNT:String;
	FLD_ENBL_IND:String;
	CNTXT_SCRN_IND:String;
	SHOW_DATA_IND:String;
	INJ_IND:String;
	RLT_ENTY_NM:String;
	CNTXT_SCRN_GRP_NM:String;
	PRTPT_TYPE_CD:String;
	DATA_TAG_PRTPT_CD:String;
	DATA_TAG_PRFM_R_CD:String;
	READ_ONLY_IND:String;
	EMTY_DLTE_IND:String;
	STWRD_EDT_IND:String;
}

export type Query = {
	allDataTagsNames: DataTagsNames[];
}

Open in new window

export class ListComponent implements OnInit {
  datatagsdetails: Observable<DataTagsNames[]>;
  constructor(private apollo: Apollo) { }

  ngOnInit() {
    this.datatagsdetails = this.apollo.watchQuery<Query>({
      query: gql`
        query allDataTagsNames {
          DataTagsNames {
           
          DATA_TAG_NM
           DATA_TAG_ID
           DSPLY_LINE_CNT
           FLD_ENBL_IND
           CNTXT_SCRN_IND
           SHOW_DATA_IND
           INJ_IND
           RLT_ENTY_NM
           CNTXT_SCRN_GRP_NM
           PRTPT_TYPE_CD
           DATA_TAG_PRTPT_CD
           DATA_TAG_PRFM_R_CD
           READ_ONLY_IND
           EMTY_DLTE_IND
           STWRD_EDT_IND

          }
        }
      `
    })
      .valueChanges
      .pipe(
        map(result => result.data.allDataTagsNames)
      );

Open in new window

0
I am trying to use Angular 7's drag and drop cdk to drag and drop mat-card. My code is quite complicated. I am creating mat-grid dynamically according to grid number (Raster is the property in JSON for this - in German). I want to just change the mat-card embedded in tile but when I drag one card from one place to another, entire layout of my grid changes. I dont want this. I just want to change the card from one postion to another. Below is my code.

Raster.component.html

<mat-grid-list cdkDropList class="example-list z-depth-5" cols="3" rowHeight="180px" gutterSize="8px" (cdkDropListDropped)="drop($event)">
  <mat-grid-tile class="example-box z-depth-4" *ngFor="let tile of tiles; let i = index" [colspan]="tile.cols" [rowspan]="tile.rows" cdkDrag>
    <mat-card class="add-new-flyer" *ngIf="tile.flyer == '-1'" id="p_{{tile.flyer}}">
      <div fxLayout="row" fxLayout.xs="column" fxLayoutWrap fxLayoutAlign="space-evenly">
        <div fxLayout fxLayout fxLayout.xs="column" fxLayoutAlign="end" fxLayoutGap="10px" fxLayoutGap.xs="0">
          <div class="button">
            <button mat-mini-fab (click)="addNewWerbedata(tile.text)">
              <mat-icon>add</mat-icon>
            </button>
          </div>
        </div>
      </div>
    </mat-card>
    <mat-card class="flyer-card" *ngIf="tile.flyer !== '-1'" id="p_{{tile.text}}">
      <div class="container" fxLayout fxLayout.xs="column" fxLayoutAlign="left" fxLayoutGap="10px" fxLayoutGap.xs="0">
        <div 

Open in new window

0
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 the official ng-book (p. 73) I read that is possible indicate an angular 6 component tag in 2 different ways. Example from the official manual:

1) <inventory-app-root></inventory-app-root>
2) <div inventory-app-root></div>

but in my Angular application only the 1st way works.


<app-test-component></app-test-component>
(work)

 <div app-test-component></div>
(doesn't work)

Why?
Thank you very much
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.