Click here to Skip to main content
14,299,664 members

JavaScript

 
AnswerRe: JavaScript Environment Pin
Richard MacCutchan7-Feb-19 22:31
protectorRichard MacCutchan7-Feb-19 22:31 
AnswerMessage Closed Pin
24-Feb-19 22:41
memberMember 1416175924-Feb-19 22:41 
QuestionJavaScript in Microsoft Visual Studio Pin
Member 141438347-Feb-19 21:43
memberMember 141438347-Feb-19 21:43 
AnswerRe: JavaScript in Microsoft Visual Studio Pin
Richard MacCutchan7-Feb-19 22:29
protectorRichard MacCutchan7-Feb-19 22:29 
AnswerMessage Closed Pin
10-Feb-19 19:03
memberEriccodejob10-Feb-19 19:03 
QuestionSimple Modal Dialog Pin
Bram van Kampen31-Jan-19 11:58
memberBram van Kampen31-Jan-19 11:58 
AnswerRe: Simple Modal Dialog Pin
Richard Deeming8-Feb-19 1:09
mveRichard Deeming8-Feb-19 1:09 
QuestionCalling Web api from Angular Service and Component Pin
simpledeveloper29-Jan-19 7:07
membersimpledeveloper29-Jan-19 7:07 
Hi,

I have a Web Api as below:
[Route("api/PeakTimeRebate")]
public class PeakTimeRebateController : Controller
{
    [HttpGet("GetTransactionStatus")]
    [DecryptoFilter]
    public IActionResult GetTransactionStatus(string EncryptedAccountNumber)
    {
        this.Response.ContentType = "text/html";
        int randVal = new Random().Next(0, 10);

        if ((randVal == 1) || (randVal == 2) || (randVal == 3) || (randVal == 5) || (randVal == 7))
            return new ObjectResult("Prime");
        if (randVal % 2 == 0)
        {
            return new ObjectResult("Even");
        }
        else
        {
            return new ObjectResult("Odd");
        }
    }
}

I am calling this from a Angular Service as below:
@Injectable()
export class PeakTimeRebatesService extends ServiceBase {
    private _peaktimerebateTransactionStatusUrl: string = '/api/PeakTimeRebate/GetTransactionStatus';

    constructor(public _http: PgeCustomHttp) {
        super(_http);
    }

    public peakTimeRebateTransactionStatus(encryptedAccountNumber: string): Observable<string> {
        debugger;
        const params: URLSearchParams = new URLSearchParams(); //'EncryptedAccountNumber', new PgeCustomQueryEncoder()
        params.set('EncryptedAccountNumber', encryptedAccountNumber);

        const options = new RequestOptions({ search: params });

        return this._http.get(this._peaktimerebateTransactionStatusUrl, options)
            .map(this.extractBoolean)
            .catch(this.handleError);
    };
};

I already have imported necessary components for the Service that I haven't mentioned here.

Now I have a component as below:
import { PeakTimeRebatesService } from '../peakTimeRebates/peakTimeRebates.service'; //Importing my Service


@Component({
    selector: 'transactionSuccessful-message',
    templateUrl: 'transactionSuccessful.component.html'
})

export class TransactionSuccessfulComponent extends ComponentBase {
    @Input()
    public TransactionMessage: string = '';
    public TransactionSuccessStatus = false;
    public TransactionExceptionStatus = false;
    private max: number = 10; private min: number = 0; private randVal: number; private checkStatMessage: string;

    @Input()
    public get EncryptedAccountNumber() {
        debugger;
        return this._encryptedAccountNumber;
    }

    public set EncryptedAccountNumber(value: string) {
        debugger;
        if ((value == null) || (value == '')) {
            value = 'XYZ'
        }
        this._encryptedAccountNumber = value;
        if (this.EncryptedAccountNumber !== '') {
            this.peakTimeRebateTransactionStatus(this.EncryptedAccountNumber);            
        }
    }

    private _encryptedAccountNumber: string = '';

    public constructor(
        private _service: PeakTimeRebatesService       
    ) {        
        super();
        debugger;
    }


    private peakTimeRebateTransactionStatus(encryptedAccountNumber: string): void {
        debugger;
        this._service.peakTimeRebateTransactionStatus(encryptedAccountNumber).subscribe((peakTimeRebateTransactionStatus: any) => {
            this.TransactionMessage = peakTimeRebateTransactionStatus;           
        });
    }


    ngOnInit(): void {
        debugger;
        this.EncryptedAccountNumber = '';      
        if (this.TransactionMessage == "Prime")
        {
            this.TransactionSuccessStatus = true;
        }
        else if (this.TransactionMessage == "Even")
        {
            this.TransactionSuccessStatus = false;
        }
        else
        {
            this.TransactionExceptionStatus = true;
        }
    }
}	

And finally my html component is:
<div class="layout-two-column">
    <section class="layout-primary">
        <form #payBillSuccessForm="ngForm" id="payBillSuccessForm" name="payBillSuccessForm" novalidate>

            <div *ngIf="TransactionSuccessStatus">
                <h2 id="transactionSucessfulText">{{ 'Common.EnrollmentSuccessful' | Translate }}</h2>
            </div>

            <div *ngIf="!TransactionSuccessStatus">
                <h2 id="transactionFailedText">{{ 'PeakTimeRebatesView.EnrollmentSuccessMessage' | Translate }}</h2>
            </div>

            <div *ngIf="TransactionExceptionStatus">
                <h2 id="transactionExceptionText">{{ 'PeakTimeRebatesView.PeakTimeRebatesHeader' | Translate }}</h2>
            </div>

            <div class="divider-invisible text-right">
                <a class="btn" routerLink="/AccountInformation" id="doneButton">{{ 'Common.Done' | Translate }}</a>
            </div>
        </form>
    </section>
</div>
<browser-back [lastpage]="true"></browser-back>


Now I am expecting that I want to show the message depending upon the returned value from web api, (the problem is that, the execution of the ngOnInit is finishing before execution of Web Api, I mean the setting of TransactionMessage is happening before the Web Api returns value, I am not sure why is it happening, I am new to the client side programming World) I found it when I put the break point, from onInit method before Service call is being completed the control is coming back and finishing the onInit then finishing the web api call, trying to understand how to call the web api from the angular controller, is the onInit not a right place to call the web api from the Angular Component. Any suggestions where am I making mistake? Any help would be very very helpful, thanks in advance. I am new to Angular, really need some help - please, thank you.

modified 29-Jan-19 16:17pm.

AnswerMessage Closed Pin
31-Jan-19 19:43
professionalElla Brown31-Jan-19 19:43 
QuestionFor loop query Pin
Member 1413327128-Jan-19 22:54
memberMember 1413327128-Jan-19 22:54 
QuestionRe: For loop query Pin
Richard MacCutchan28-Jan-19 23:35
protectorRichard MacCutchan28-Jan-19 23:35 
AnswerRe: For loop query Pin
ZurdoDev30-Jan-19 2:08
professionalZurdoDev30-Jan-19 2:08 
AnswerRe: For loop query Pin
Suresh Madhavaraju11-Feb-19 3:20
memberSuresh Madhavaraju11-Feb-19 3:20 
AnswerRe: For loop query Pin
W Balboos7-Mar-19 7:18
mveW Balboos7-Mar-19 7:18 
QuestionDebugging Pin
Bram van Kampen26-Jan-19 14:14
memberBram van Kampen26-Jan-19 14:14 
AnswerRe: Debugging Pin
Richard Deeming28-Jan-19 1:01
mveRichard Deeming28-Jan-19 1:01 
GeneralRe: Debugging Pin
Bram van Kampen28-Jan-19 11:21
memberBram van Kampen28-Jan-19 11:21 
QuestionCan anyone help me understand this code? Pin
Member 1411814323-Jan-19 1:20
memberMember 1411814323-Jan-19 1:20 
AnswerRe: Can anyone help me understand this code? Pin
Richard Deeming23-Jan-19 7:35
mveRichard Deeming23-Jan-19 7:35 
QuestionJavaScript : TypeScript :: Python : <what> Pin
Amarnath S20-Jan-19 16:58
professionalAmarnath S20-Jan-19 16:58 
AnswerRe: JavaScript : TypeScript :: Python : <what> Pin
Richard MacCutchan20-Jan-19 21:29
protectorRichard MacCutchan20-Jan-19 21:29 
QuestionInjecting an external page to a div using ajax. Pin
Member 1125974616-Jan-19 23:59
memberMember 1125974616-Jan-19 23:59 
AnswerRe: Injecting an external page to a div using ajax. Pin
Graham Breach17-Jan-19 0:31
memberGraham Breach17-Jan-19 0:31 
GeneralRe: Injecting an external page to a div using ajax. Pin
Member 1125974617-Jan-19 0:36
memberMember 1125974617-Jan-19 0:36 
QuestionCan someone help me reverse engineer this code and get it working as jQuery? Pin
Member 1411874515-Jan-19 4:14
memberMember 1411874515-Jan-19 4:14 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.