Angular

713

Solutions

454

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

hi how can i display my login page like this

username xxxxxxxxxxxxxxxxxx
password xxxxxxxxxxxxxxx

at the moment is like this

username
xxxxxxxxxxxxxxxxx

pasword
xxxxxxxxxxxxxxxx
pagei also what image on top
this my html
<h2>Login</h2>

<form [formGroup]="loginForm" (ngSubmit)="onSubmit()">
    <div class="form-group">
        <div class="text-center">
            <div class="kv-avatar">
                <div class="file-loading">
                    <input id="avatar-1" name="avatar-1" type="file" required>
                </div>
            </div>
        </div>
    </div>
    <div class="form-group">
        <label for="username">Username</label>
        <input type="text" formControlName="username" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.username.errors }" />
        <div *ngIf="submitted && f.username.errors" class="invalid-feedback">
            <div *ngIf="f.username.errors.required">Username is required</div>
        </div>
    </div>
    <div class="form-group">
        <label for="password">Password</label>
        <input type="password" formControlName="password" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.password.errors }" />
        <div *ngIf="submitted && f.password.errors" class="invalid-feedback">
            <div *ngIf="f.password.errors.required">Password is required</div>
        </div>
    </div>
     <div class="form-group">
        <label for="Unit Code">UntCde</label>
  

Open in new window

0
I am currently building a android based app using Ionic 4 and angular. I am looking for all possible ways to connect the app to a locally hosted database (sql server 2017). I am aware that I can connect through wifi, but was wondering if it is possible to make this connection using a usb instead of wifi. Is there a way to connect to a db this way to insert or update data on the sql server 2017 side?

Scenario: Program that works on a pc, using a locally hosted server. A tablet in front, to capture data from clients easily so that reception does not have to type everything in themselves.
0
hi am having error in angular
type32
import {Injectable } from '@angular/core';
import { Subject } from 'rxjs';
import {HttpClient} from '@angular/common/http';

import {Post} from './post.model';

@Injectable({providedIn: 'root'})
export class PostsService{
    private posts: Post[] = [];
    private postsUpdated = new Subject<Post[]>();

    constructor(private http: HttpClient){}

    getPosts(){
        this.http.get<{message: string,posts: Post }>('http://localhost:3000/api/posts')
          .subscribe((postData) =>{
        this.posts[] = postData.posts;
        this.postsUpdated.next(...this.posts);
    });
    }

    getPostUpdateListener(){
        return this.postsUpdated.asObservable();
    }

    addPost(title: string, content: string){
        const post: Post = {id:null,title: title,content: content};
        this.posts.push(post);
        this.postsUpdated.next([...this.posts]);

    }
}

Open in new window

0
Hi, I used Angular 1.6 in the old project and now moved to Angular 8 am looking for an equivalent event that triggers timeout . In the old project I had a timeout.js file where it triggers the below code

$rootScope.$broadcast('session-expiring', { seconds: expiringInSeconds });

and this timeout is consumed in the header.js file with below code

  $rootScope.$on('session-expiring', function (event, data) {
            vm.Counter = data.seconds;          
            vm.sessionExpiring = true;
        });

How do I use the similar code to trigger timer event from one file to another in Angular 8? Please help
0
hi am having multiple button in my angular application
multiple
0
Hi,
We need to authenticate our system users; System architecture is 3-tiers as follows:

Storage server: MS SQL Server
Application server: WCF services hosted in IIS
Presentation: Website built using AngularJS, Mobile App.

I searched the web and found that JWT is useful for this purpose.
I found many frameworks such as https://identityserver.io/

BUT we need NOT to depend on any framework.

Please collaborate by adding code, configuration,... snippets to do the authentication.
PLEASE no external URLs.

Note: we are using the .Net framework 4.8
0
Can you please help me writing below directive which is part of angularjs to angular6 ?

define(function (require, exports, module) {
    'use strict';

    var base = require('base');
    var utils = base.utils;

    configCompile.$inject = ['$compileProvider'];
    module.exports = configCompile;

    function configCompile($compileProvider) {

        $compileProvider.directive('myCompile', myCompile);

        function myCompile($compile) {
            // directive factory creates a link function
            return {
                scope: {
                    compile: "=",
                    scope: "=?",
                },
                link: link,
            }

            function link(scope, element, attrs) {
                var scope_child = scope.$new();

                scope.$watch('compile', function () {
                        // element.html(scope.compile);
                        element.empty().append(scope.compile);
                        $compile(element.contents())(scope_child);
                    }
                );

                scope.$watch('scope', function () {
                        scope.scope = scope.scope || {};
                        scope_child = scope.$new();
                        for (var idx in scope.scope) {
                            scope_child[idx] = scope.scope[idx];
                        }
                        scope_child.$this = scope.scope;
                        // element.html(scope.compile);
        

Open in new window

0
Hi,

In the angular-ng-autocomplete control, i need to show a dropdown image in the right corner of the textbox by default, just like X button is displayed when any text is entered/selected.

Demo Link:
https://stackblitz.com/edit/angular-ng-autocomplete-with-images
0
Hi,

Am trying to create a editable dropdown which does not clear if the value does not exists in the dropdown.
Currently the value gets cleared if its not available.

Issue Available in below link: Value will be reset if we enter other than dropdown value
https://stackblitz.com/edit/angular-w1n4at

I want to retain the value.
0
I am using ui-select for autocomplete functionality and if there are no results for search criteria then i am using ui-select-no-choice to display message back to the user.

          <ui-select-no-choice>
            No Data found
          </ui-select-no-choice>

Open in new window


Since my dataset is huge i used minimum-input-length="4" so there wouldn't be large results but the problem i am facing is if user doesn't enter any data then ui-select-no-choice message is being displayed which is incorrect. I need to display the message if user types more than 4 character.
0
I am using ui-select for autocomplete multiselect & after i select the item from the dropdown it doesn't bind properly to the ui-select directive. Here is how it looks & the data shows as blue with no text in it...

ui-select.jpg
Here is the HTML syntax

<ui-select multiple ng-model="ctrl.country.selected" theme="selectize" style="width: 900px;" title="Choose a country">
  <ui-select-match placeholder="Select or search a country in the list...">{{$select.selected.name}}</ui-select-match>
  <ui-select-choices multiselect repeat="country in ctrl.countries | filter: $select.search | limitTo: ($select.search.length <= 3)? 0 : undefined">
    <span ng-bind-html="country.name | highlight: $select.search"></span>
    <small ng-bind-html="country.code | highlight: $select.search"></small>
  </ui-select-choices>
</ui-select>

Open in new window


Here is the datasource

 
vm.country = {};
  vm.countries = [ // Taken from https://gist.github.com/unceus/6501985
    { name: 'Afghanistan', code: 'AF' },
    { name: 'Åland Islands', code: 'AX' },
    { name: 'Albania', code: 'AL' },
    { name: 'Algeria', code: 'DZ' },
    { name: 'American Samoa', code: 'AS' },
    { name: 'Andorra', code: 'AD' },
    { name: 'Angola', code: 'AO' },
    { name: 'Anguilla', code: 'AI' },
    { name: 'Antarctica', code: 'AQ' },
    { name: 'Antigua and Barbuda', code: 'AG' },
    { name: 'Argentina', code: 'AR' },
    { name: 'Armenia', code: 'AM' },
    { name: 'Aruba', code: 'AW' },
    { name: 'Australia', code: 'AU' },
    { name: 'Austria', code: 'AT' },
    { name: 'Azerbaijan', code: 'AZ' }
]

Open in new window


Also is there a way to sort data of the datasource in repeat attribute or some where??
0
I have ui-select for autocomplete multiselect functionality & i am using AngularJS to call backend API and need to pass SearchCriteria using filter directive but can't seem to make it work..It is passing null value even though i enter the searchtext in ui-select(verified this using fiddler too).

Also i need to display Name to user in autocomplete but need to store ID in the DB. how do i do that?? In Kendo autocomplete we use datatextfield and datavaluefield attributes to achieve this but not sure how we do that in ui-select
0
Can we use ngSelect & get datasource from backend API call in AngularJS. Backend API should be called only when user types more than 4 characters(the reason i m trying to implement this, because my datasource is pretty huge & i didn't want to load everything)

https://ng-select.github.io/ng-select#/multiselect

I initially wanted to  use ngTypeahead but that doesn't support multiselect feature.
0
Can ngtypeahead be used along with angularJS?? Does it support multiselect feature
0
I have a T&C text which is formatted in the following manner, I need to store this information in SQL db
and while retrieving it should look exactly the same on the UI including the alignment.

Note: Currently i am able to save and retrieve this text from Sql DB but it is not maintaing the formatting while saving and retrieving in my Angular application

(1) Advertiser has and will maintain all consents that are required to allow us, including without limitation to send to us the Advertiser Data that we collects, uses, and stores pursuant to the provision of those Services;
(2) each Advertiser Website properly has provided and shall provide and maintain any and all required disclosures, including privacy disclosures and policies that disclose
      (i) data collection and usage associated with third-party advertising,
      (ii) identify the nature and scope of the collection and use of data and information collected by Advertiser and third parties, and
      (iii) information about, and when necessary consent to, the storing and accessing of cookies or other information on the end user’s device and in each case that are easily accessible to end users;
(3) that Advertiser complies with all Applicable Laws and meets or exceeds industry privacy guidelines, including but not limited to
      (i) the U.S. Federal Trade Commission rules and guidelines regarding the collection, use and disclosure of data from or about end users, and
      (ii) the Self-Regulatory…
0
I have a open button click event and in the click event would be:

    let tabName = localStorage.getItem("tab-1");
    if(tabName)
    {
        window.open("", tabName).focus;
    }
    else
    {
        let url = "about";
        localStorage.setItem("tab-1", "about");
        window.open(url, url).focus();
    }   

Open in new window


So 1st time you click it a new tab will open and show the about route for example localhost:4200/about and your page. Now if you go to that tab and change the address bar to www.yahoo.com go back to the main page tab click on the button again and it goes back to the about tab that has yahoo on it. In that case I need to open a new tab if that address changed typed in by the user was changed where now the content has changed.  The 1st time you click the button the local storage will have the tab-1 about key value in dev tools console local storage. When you go to the about tab and change the address that local storage removes that key value but it still exists on the main page tab and still focuses to that tab.

What I am trying to do is open the user to the new tab and focus if they click on it again focus as it will find the key value of the tab and focus.  If the user changes the content though I am trying to then either remove that item from local storage and create a new tab but cant get it to work.  It seems like because the key value is still in the main local storage or just simply the dom still has that tab name it wont work.
0
I have a very critical requirement for one of my projects. I have a Angular 8 application on the UI side and have Function apps on the Azure side. My requirement is as follows:
1) The moment user log ins there should be a call from angular to the microsoft site to acquire the jwt token, This token should be stored in the local storage.
2) Whenever there is a call to the API (Azure Function apps) from Angular this bearer token should be retrieved from the local storage and send in the header of the Api call.
3) before sending the token there should be a check is the token is not expired.
4) I have clientid,clientsecret information available.

I have the following code but its not fetching me the token from Azure:

 private url: string = 'https://login.microsoftonline.com/comcastcorp.onmicrosoft.com/oauth2/token';
  constructor(private http: HttpClient, private jwtHelper: JwtHelperService) { }

@Injectable({
  providedIn: 'root'
})
export class AuthService {

acquiretoken(): Observable<any> {
    let headers = new HttpHeaders({'Content-Type': 'application/x-www-form-urlencoded'});
    let body = new URLSearchParams();
    body.set('resource', "xxx-xxx-xxx");
    body.set('grant_type', "client_credentials");
    body.set('client_id', "xxx-xxx-xxx);
    body.set('client_secret', "xxx-xxx-xxx);

    return this.http.post<any>(this.url, body.toString(), {
      headers: headers
    }).pipe(
     [b] map(jwt => {[/b]
        if (jwt && jwt.access_token) {
          

Open in new window

0
I have 2 kendo multiselect fields in a web page that uses angularJS & MVC architecture.  When i navigate to Edit screen, data bind for existing values is working fine on multiselect fields but i see something is going on in the background as i can see spinner icon beside the control.  This looks as if Server filter is active & currently going on as Spinner icon is dispalyed & preventing user to search

I am not sure what  the issue is & how to resolve this??

Search.jpg
0
I was implementing below plunker in my application & popover doesn't seem to work. While inspecting DOM i noticed event listeners are not being generated. I tried with popover-trigger="'click'" & also with popover-trigger="'focus'"

UI bootstrap Popover


how do we resolve this issue
0
I have a bootstrap popover which has 2 buttons Yes or No. Based on the response from the user i need to call AngularJS service function. How do i do that??

Popover is created only if it meets a certain criteria (like existence of duplicate records)

    <script>
        
        $(document).ready(function () {
            if (DuplicateRecord) {
                $('[data-toggle="popover"]').popover();
            }
            });
       
    </script>

Open in new window


HTML code looks something like this but currently doesn't have 2 buttons & still need to work on it

 <button href="#" data-toggle="popover" title="Popover Header" data-content="Some content inside the popover" data-trigger="click" data-html="false" data-placement="left">Toggle popover</button>

Open in new window

0
hi am having this error in my app http error
httpcode
import {Http} from '@angular/http';
import {EventEmitter, Injectable} from '@angular/core';
import {Observable} from 'rxjs';
import {map} from 'rxjs/operators';
import {Task} from './task.model';


@Injectable()
export class TaskService {

    onTaskAdded = new EventEmitter<Task>();

    constructor(private http: Http) {

    }

    getTasks() {
        return this.http.get('/api/tasks').map(response => response.json());
    }

    saveTask(task: Task, checked: boolean) {
        task.completed = checked;
        return this.http.post('/api/tasks/save', task).map(response => response.json());
    }

    addTask(task: Task) {
        return this.http.post('/api/tasks/save', task).map(response => response.json());
    }

}


app module
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { TasksComponent } from './tasks/tasks.component';
import { TasksAddComponent } from './tasks/tasks-add/tasks-add.component';
import { TasksListComponent } from './tasks/tasks-list/tasks-list.component';
import {FormsModule} from '@angular/forms';
import {HttpModule} from '@angular/http';

@NgModule({
  declarations: [
    AppComponent,
    TasksComponent,
    TasksAddComponent,
    TasksListComponent
  ],
  imports: [
    BrowserModule,
      HttpModule,
      FormsModule,

  ],
  providers: [],
  bootstrap: 

Open in new window

0
hi when creating new spring boot application in eclipse what must i choose
enterprise application or Dynamic web project i also what to add angular in this project and later use hirbinate
0
I have an angular application housed in a web part on SharePoint 2016.  It works and has been working as required and I was recently asked to add an animation to a div.  When I add the reference to ngAnimate to the controller, it breaks.

(function () {
  angular.module("App", ["ngAnimate"])

etc..

Open in new window

0
hi am geting a blank screen in my application but i have added component
component am in angular 8
this my application angulari get this when i do insepect
compiler.js:2175 Uncaught Error: Template parse errors:
'app-posts-create' is not a known element:
1. If 'app-posts-create' is an Angular component, then verify that it is part of this module.
2. If 'app-posts-create' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("<!--The content below is only a placeholder and can be replaced.-->
<h1>Our First App</h1>
[ERROR ->]<app-posts-create></app-posts-create>
"): ng:///AppModule/AppComponent.html@2:0
    at syntaxError (compiler.js:2175)
    at TemplateParser.parse (compiler.js:11292)
    at JitCompiler._parseTemplate (compiler.js:25837)
    at JitCompiler._compileTemplate (compiler.js:25825)
    at compiler.js:25769
    at Set.forEach (<anonymous>)
    at JitCompiler._compileComponents (compiler.js:25769)
    at compiler.js:25682
    at Object.then (compiler.js:2166)
    at JitCompiler._compileModuleAndComponents (compiler.js:25681)
0
hi am geting the following error
ERROR in src/app/tasks/tasks-add/tasks-add.component.ts:24:17 - error TS2345: Argument of type '(newTask: Task) => void' is not assignable to param
eter of type '(value: Task[]) => void'.
  Types of parameters 'newTask' and 'value' are incompatible.
    Type 'Task[]' is missing the following properties from type 'Task': id, name, completed, dueDate

24                 (newTask: Task) => {
                   ~~~~~~~~~~~~~~~~~~~~

** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
i 「wdm」: Failed to compile.

my code is
import { Component, OnInit } from '@angular/core';
import { Task } from '../task.model';
import {TaskService} from '../task.service';

@Component({
    selector: 'app-tasks-add',
    templateUrl: './tasks-add.component.html',
    styleUrls: ['./tasks-add.component.css']
})
export class TasksAddComponent implements OnInit {

    addTaskValue: string = null;

    constructor(private taskService: TaskService) { }

    ngOnInit() {

    }

    onTaskAdd(event) {
        let task: Task = new Task(event.target.value,false, this.getTodayAsString());
        this.taskService.addTask(task)
            .subscribe(
                (newTask: Task) => {
                    // clear the input
                    this.addTaskValue = ' ';
                    this.taskService.onTaskAdded.emit(newTask);
                }
            )
    }

    getTodayAsString() {

Open in new window

0

Angular

713

Solutions

454

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.

Top Experts In
Angular
<
Monthly
>