In this tutorial we will update the Angular Client app to and create a form to upload a file to our Laravel API. We will use the Angular reactive forms for validation. Lastly we will create an Angular guard to make the post form only accessible to logged-in users.
Introduction In the last few parts, we had created the authentication API, get the photos and videos, and was able to have the Angular app login work. Now we can update the client app to show the photos or videos. In this tutorial we show the photos and videos in an infinite scrolling page. Lastly,
… Read more
In this tutorial we will create an Angular application that will authenticate to a Laravel OAuth server. We will use the authorization code with PKCE flow since the Angular application is an SPA or Single-page-application. In SPAs we can't store the client secret since it will be visible in the browser. So we are going to write the codes that will generate the correct login URL and redirect to it. After logging in to that URL the OAuth server will redirect back to our app where we can get an access token that we can use to request protected resources.
Introduction In this tutorial we will create an Angular application that authenticates using Authorization Code flow with PKCE. PKCE stands for Public Key Code Exchange and is useful authentication code flow when you know it is not safe for the app to store the client secret such as SPAs (Single Page Apps). Setup To generate
… Read more
When authenticating to OAuth, the access token is usually short lived and expires after a few hours or minutes. Some apps will want to use the refresh_token grant to refresh the access token to keep the user logged in. In this tutorial we will create an Angular app and with keep-alive using @ng-core, @ng-keepalive, and angular-2-storage for storing tokens.
In this tutorial we will create an Angular application that authenticates to an OAuth2 server with Authorization Code flow. The app will redirect to the OAuth2 server's login page. After logging in, the user will be redirected back to the app and get access token and refresh token.
In Angular 4 we use HttpClient to perform AJAX request. HttpClient does help with type hints unlike the old Http but it does not really map to a typed object, it only returns a JavaScript object. In this tutorial we will use decorators to help with mapping properties. With this technique we don't have to map every JSON response from AJAX to typed objects, we just decorate properties of a class.
In this tutorial we will create a basic form using reactive forms. Next we will create a better way to show validation error messages. This will be helpful in applications where the use of form fields are used everywhere.
Electron is a framework for building cross-platform desktop applications using web technologies using Chromium and Node JS. In this tutorial we will turn an Angular 4 web application into a desktop application.
There times where we want our component to render custom template because we want it to be more dynamic just like most open-source libraries that want to cover more use cases as possible. Here is an example. In this post we will be finishing the responsive table from the last blog post. We will also discuss what is the purpose of #template and let-book keywords and the ViewContainerRef.