├── LICENSE └── README.md /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2020 Techiediaries.COM (Ahmed Bouchefra) 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Angular 10/9 Cookbook 2 | 3 | Throughout this cookbook examples you'll learn Angular--one of the most popular platforms for building front-end web applications 4 | 5 | Using Angular, you can take advantage of a powerful TypeScript platform and tools to create applications for web, mobile and desktop. TypeScript is a superset of JavaScript with powerful OOP abstracts and a strongly typed system that compiles to JavaScript. 6 | 7 | With Angular you have strong tools and design patterns to build either small or large web projects. 8 | 9 | Angular is developed and maintained by Google. It has a large community which means you can find help on the web if you have any issues implementing your project requirements. 10 | 11 | Our Angular learning path will offer the necessary tutorials, PDF books, for beginners, and examples to get started using this framework in your next project. 12 | 13 | ## Introducing Angular 10 14 | 15 | [AngularJS](https://angularjs.org/) was the most popular client-side framework among JavaScript developers for many years. Google introduced AngularJS in 2012. It's based on a variation of the very popular [Model-View-Controller pattern](https://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93controller) which is called Model-View-*. 16 | 17 | The AngularJS framework, was built on top of JavaScript with the aim to decouple the business logic of an application from the low level DOM manipulation and create dynamic websites. Developers could use it to either create full-fledged SPAs and rich web applications or simply control a portion of a web page which makes it suitable for different scenarios and developer requirements. 18 | 19 | ### Data Binding 20 | 21 | Among the powerful concepts that were introduced by AngularJS, is the concept of [data binding](https://docs.angularjs.org/guide/databinding) which enables the view to get automatically updated whenever the data (the model layer) is changed and inversely. 22 | 23 | ### Directives 24 | 25 | The concept of [directives](https://docs.angularjs.org/guide/directive) was also introduced by AngularJS, which allows developers to create their own custom HTML tags. 26 | 27 | ### Dependency Injection 28 | 29 | The other introduced concept is [Dependency Injection](https://docs.angularjs.org/guide/di), which allows developers to inject what's called services (singletons that encapsulates a unique and re-usable functionality within an application) into other components which encourages re-usability of the code. 30 | 31 | ## Why Learning Angular 10? 32 | 33 | By learning Angular, you'll have more chances of finding a job as a front-end developer! So in this learning path, will teach you the framework through building several examples from scratch. 34 | 35 | You'll learn about: 36 | 37 | - Anglular CLI. 38 | - Angular components and modules, 39 | - Angular template syntax and data binding: Interpolation and Event binding, 40 | - Angular pipes, 41 | - Angular directives, 42 | - Angular services, 43 | - Angular `HttpClient`, 44 | - Angular routing, 45 | - Angular Material, 46 | - Using Bootstrap with Angular, 47 | - Deployment. 48 | 49 | ## How Long Will it Take to Learn Angular 10? 50 | 51 | This depends of what you mean by learning Angular. If you want to be able to build and deploy a production-ready Angular application in a reasonable timeframe, this will probably take byou etween 6 and 12 months depending on your background and existing skills. 52 | 53 | ## Is Angular Easy to Learn? 54 | 55 | If you have a good knowledge of the three pillars of the web i.e JavaScript, CSS and HTML, Angular may be easy to learn. If you are a beginner front-end web developer that would be very difficult. 56 | 57 | ## The Prerequisites to Learn Angular? 58 | 59 | You'll need to have a good knowledge of HTML, CSS and JavaScript basics. 60 | 61 | A basic Knowledge of TypeScript can be very helpful. 62 | 63 | ## How Do you Start Learning Angular? 64 | 65 | Angular is not like React, it's a complete platform which includes all what you need to build frontend web apps, so learning it will take you more time. Let's make the process easy for you by providing you with a roadmap. 66 | 67 | If you are a beginner frontend web developer, you probably want to start by learning the basics of frontend web development i.e what we call the three pillars of the web, HTML, CSS and JavaScript. You don't need to master these technologies but you should be familiar with the basics and build simple web pages with HTML, style them with CSS and add interactivity with JavaScript. 68 | 69 | You can get started with HTML, JavaScript and CSS from our guides: 70 | 71 | - [HTML Tutorial for Angular developers](https://www.techiediaries.com/html-tutorial/): Angular makes use of regular HTML with an extra template syntax so in this article, we'll introduce you to HTML from an Angular point of vue. 72 | - [CSS Tutorial for Angular developers](https://www.techiediaries.com/css-tutorial/): We'll also introduce to CSS and we'll see in the same time how you can start using it in the context of Angular. 73 | 74 | Angular makes use of TypeScript instead of plain JavaScript. TypeScript is a super-set of JavaScript that adds object oriented concepts and strong types to the language but before you can run your code in a web browser, you will need to compile it to JavaScript. We'll see later that this is pre-configured for you in your Angular project. 75 | 76 | These are some JavaScript guides in our website: 77 | 78 | And this is our TypeScript tutorial(s): 79 | 80 | - [TypeScript Tutorial](https://www.techiediaries.com/typescript-tutorial/) 81 | 82 | ## Our Angular PDF Books 83 | 84 | - [Practical Angular: Build your first web apps with Angular 8](https://www.techiediaries.com/angular-book-build-your-first-web-apps/) 85 | - [Learn Angular: Full-Stack & CRUD Angular 7/8 PDF Tutorial](https://www.techiediaries.com/angular-6-tutorial-pdf/) 86 | 87 | ## What's a Framework and Why Using it 88 | 89 | A JavaScript or client-side framework is an abstraction that provides developers with a set of tools to easily and efficiently develop front-end web applications. Most frameworks dictate many aspects of your web projects like directory structure and configuration files and different tools that can be used for adding essential functionalities like testing. 90 | 91 | A client-side framework is built on top of a client side programming language to help abstract the low level APIs of programming languages and client APIs and makes developers more productive. In fact there is only one client-side language which is JavaScript; the plethora of the web and the only language that web browsers understand but there also more sophisticated and modern programming languages that compile to JavaScript such as TypeScript and CoffeeScript. Which means they can also be the base of a client side framework. 92 | 93 | Frameworks are all the rage nowadays and most serious JS developers use a framework for building front-end apps and interfaces instead of using plain JavaScript or jQuery. 94 | 95 | Most JavaScript frameworks are said to be **opinionated** which means their creators enforce their opinions or their own philosophy of how web projects should be configured and organized. This also means, developers should learn the new abstractions provided by the framework and any new concepts besides learning the base programming language. 96 | 97 | Frameworks provide abstractions for working with many aspects like for example DOM manipulation and Ajax/HTTP. if the technology deals with only one aspect, it's mostly called a library. For example popular libraries like React or Vue.js deal only with the view or the UI of an application by using a virtual DOM and diffing with the real DOM which provides better performance. 98 | 99 | Nowadays powerful and modern JavaScript frameworks have emerged and taken the web by storm. Instead of websites with poorly structured JS or jQuery code we have now complete web apps with best practices and code structure with complex and rich UIs. These modern client-side web apps use heavy JavaScript which impacts performance and by result the user experience; and as such even if web browsers became more powerful we still need to follow best practices and battle tested tools and patterns which client-side frameworks try to help with. 100 | 101 | ## All Angular 10/9/8/7/6 Articles 102 | 103 | ## Content Projection in Angular 10/9: Pass Data from a Parent Component to a Child Template with Ng-content 104 | 105 | Content projection is an Angular concept that helps developers build reusable components. It allows you to pass data from a parent component to a template of a child component 106 | 107 | 05 Aug 2020 108 | 109 | [Read article](https://www.techiediaries.com/angular-ng-content/) 110 | 111 | ## Lazy Loaded Module Example in Angular 10/9 with loadChildren & Dynamic Imports 112 | 113 | Lazy loading is the process of loading some features of your Angular 10 application only when you navigate to their routes for the first time. This can be useful for increasing your app performance and decreasing the initial size of the bundle transmitted to the user's browser 114 | 115 | 05 Aug 2020 116 | 117 | [Read article](https://www.techiediaries.com/angular-lazy-load-module-example/) 118 | 119 | ## Mock a REST API Back-End for Your Angular 10/9 App with JSON-Server and Faker.js 120 | 121 | In this tutorial, we’ll learn, with a quick example, how to mock a REST API back-end for your Angular 10 application which you can consume using Angular HttpClient even before your real back-end is ready 122 | 123 | 05 Aug 2020 124 | 125 | [Read article](https://www.techiediaries.com/angular-mock-backend/) 126 | 127 | ## Angular 10/8 Material Data-Table Tutorial & Example 128 | 129 | Angular 10 Material data tables provide a quick and efficient way to create tables of data with common features like pagination, filtering and ordering. 130 | 131 | 05 Aug 2020 132 | 133 | [Read article](https://www.techiediaries.com/angular-material-table/) 134 | 135 | ## Angular 10/9 Popup Modal Example with Angular Material Form and Modal Dialog Components 136 | 137 | In this tutorial, you'll build an example login UI with a form and modal dialog styled with Angular Material 10. 138 | 139 | 05 Aug 2020 140 | 141 | [Read article](https://www.techiediaries.com/angular-material-login-form-modal-dialog/) 142 | 143 | ## Angular 10/9 Material Date Picker, Input, CheckBox, Radio Button and Select 144 | 145 | In this tutorial, you'll learn how to use Angular Material to style forms in your Angular 10/9 web app. 146 | 147 | 05 Aug 2020 148 | 149 | [Read article](https://www.techiediaries.com/angular-material-form-datepicker-example/) 150 | 151 | ## Angular 10/8 Material Dialog with Example 152 | 153 | This tutorial shows you how you can use Angular 7/8 Material to build Material UI dialogs for your web application 154 | 155 | 05 Aug 2020 156 | 157 | [Read article](https://www.techiediaries.com/angular-material-dialogs/) 158 | 159 | ## Angular 10/9 Router: Resolve & Route Resolvers Example 160 | 161 | The Angular 10 Router provides a resolve property that takes a route resolver and allows your application to fetch data before navigating to the route (i.e resolving route data) 162 | 163 | 05 Aug 2020 164 | 165 | [Read article](https://www.techiediaries.com/angular-router-resolve/) 166 | 167 | ## Angular 10/9 Router: Route Animations by Example 168 | 169 | The Angular 10 Router supports adding animations when navigating between different routes in your application. In this tutorial, we'll learn how to use the Angular’s animations API to play animations when a route changes in your application 170 | 171 | 05 Aug 2020 172 | 173 | [Read article](https://www.techiediaries.com/angular-router-animations/) 174 | 175 | ## Angular 10 Modules 176 | 177 | Learn about Angular 10 modules 178 | 179 | 05 Aug 2020 180 | 181 | [Read article](https://www.techiediaries.com/angular-modules/) 182 | 183 | ## Use JavaScript in Angular 10/9 184 | 185 | In this tutorial, we'll learn how to use external and custom JavaScript libraries/code in Angular 10 projects which are based on TypeScript 186 | 187 | 05 Aug 2020 188 | 189 | [Read article](https://www.techiediaries.com/use-javascript-in-angular/) 190 | 191 | ## Electron with Angular 10/9 Tutorial 192 | 193 | In this tutorial, we'll learn how to integrate Angular 10 with Electron to build cross-platform desktop apps with the most powerful web technologies 194 | 195 | 05 Aug 2020 196 | 197 | [Read article](https://www.techiediaries.com/angular-electron/) 198 | 199 | ## Angular 10/9 Data (Event & Property) Binding by Example 200 | 201 | In this tutorial, we'll continue building our calculator application using Angular 10. We'll be particularly learning about data binding both event and property binding 202 | 203 | 05 Aug 2020 204 | 205 | [Read article](https://www.techiediaries.com/angular-data-event-property-binding/) 206 | 207 | ## HTML5 Data Attributes in Angular 10/9 208 | 209 | In this quick tutorial, we'll see how you can add/set and access HTML5 data attributes in Angular 10/9 210 | 211 | 05 Aug 2020 212 | 213 | [Read article](https://www.techiediaries.com/add-access-html-data-attribute-angular/) 214 | 215 | ## Angular 10/9 Elements Tutorial by Example: Building Web Components 216 | 217 | In this Angular 10 Elements tutorial by example we'll learn how to use Angular to build web components or custom elements. 218 | 219 | 04 Aug 2020 220 | 221 | [Read article](https://www.techiediaries.com/angular/angular-9-elements-web-components/) 222 | 223 | ## Angular 10 Universal Example Application with Express.js 224 | 225 | Throughout this tutorial we are going to build an example, server side rendered, web application with Angular 10 and Express server 226 | 227 | 04 Aug 2020 228 | 229 | [Read article](https://www.techiediaries.com/universal-angular-express/) 230 | 231 | ## Angular 10/9 SEO: Adding Title and Meta Tags to Your Universal App 232 | 233 | In this tutorial, we'll see in a 3 easy steps how you can render your Angular 10 application on the server to make it SEO-friendly and boost its performance using the Angular Universal technology 234 | 235 | 04 Aug 2020 236 | 237 | [Read article](https://www.techiediaries.com/angular-seo-title-and-meta-tags/) 238 | 239 | ## Angular 10/9 SEO: Rendering Your App on Server-side with Angular Universal 240 | 241 | In this tutorial, we'll see in a 3 easy steps how you can render your Angular 10 application on the server to make it SEO-friendly and boost its performance using the Angular Universal technology 242 | 243 | 04 Aug 2020 244 | 245 | [Read article](https://www.techiediaries.com/angular-seo-server-side-rendering-with-angular-universal/) 246 | 247 | ## Angular 10/9 Router Tutorial: Learn Routing & Navigation by Example 248 | 249 | In this tutorial part, we’ll learn about Angular Router by example and will teach you everything you need to start using Angular routing to build Single Page Applications. 250 | 251 | 04 Aug 2020 252 | 253 | [Read article](https://www.techiediaries.com/angular/angular-9-8-router-tutorial-learn-routing-and-navigation-by-example/) 254 | 255 | ## Angular 10 HttpClient Headers and Typed/Full Responses: Pagination Example 256 | 257 | In this tutorial, we'll learn how to get Angular 10 HttpClient headers and full responses 258 | 259 | 04 Aug 2020 260 | 261 | [Read article](https://www.techiediaries.com/angular-httpclient-headers-full-response/) 262 | 263 | ## 3+ Ways to Add Bootstrap 4 to Angular 10/9 With Example & Tutorial 264 | 265 | In this tutorial we will see how to use Bootstrap 4 to style websites built using the Angular 10 framework. We'll see how we can easy integrate both of them, using ng-bootstrap vs. ngx-bootstrap packages and using the Angular CLI 10 for generating a brand new project. 266 | 267 | 04 Aug 2020 268 | 269 | [Read article](https://www.techiediaries.com/angular-bootstrap/) 270 | 271 | ## Angular 10/9 Firestore Database CRUD Tutorial 272 | 273 | In this tutorial, you'll be using Angular 10 with Firebase and Firestore to create am app that implements the common CRUD operations 274 | 275 | 04 Aug 2020 276 | 277 | [Read article](https://www.techiediaries.com/angular-firebase/angular-9-8-firestore-database-crud-tutorial/) 278 | 279 | ## Deployment to Firebase Hosting with Angular CLI 10 in 5 Easy Steps 280 | 281 | You have finally developed your Angular 10 application and you are ready to deploy it to a hosting provider and show it to the world! But, you think, you still have to do so much work to host the application. Fortunately for you, that's not true any more thanks to the latest 8.3+ version of Angular CLI which added a new command to the Angular developer arsenal 282 | 283 | 04 Aug 2020 284 | 285 | [Read article](https://www.techiediaries.com/angular-firebase/deployment-to-firebase-hosting-angular-cli-9/) 286 | 287 | ## Angular 10/9 Authentication with Firebase (Google, Email & Password): Login, Register, Email Verification and Password Recovery 288 | 289 | In this tutorial, you will learn to add email and social authentication with login, register, email verification and password recovery to your Angular 10 app using Firebase and Google 290 | 291 | 04 Aug 2020 292 | 293 | [Read article](https://www.techiediaries.com/angular-firebase/angular-9-firebase-authentication-email-google-and-password/) 294 | 295 | ## Angular 10/9 ngTemplate & ngTemplateOutlet Example: Dynamic and Reusable Templates 296 | 297 | In this tutorial, we'll see how to use ng-template and ngTemplateOutlet for creating dynamic and reusable template partials in Angular 10 298 | 299 | 04 Aug 2020 300 | 301 | [Read article](https://www.techiediaries.com/angular-ngtemplate-ngtemplateoutlet/) 302 | 303 | ## The Angular 10/9 RouterLink, Navigate and NavigateByUrl 304 | 305 | In this tutorial we're going to see how to navigate with the Angular Router using routerLink, Router.navigate() and Router.navigateByUrl() 306 | 307 | 04 Aug 2020 308 | 309 | [Read article](https://www.techiediaries.com/angular-router-routerlink-navigate-navigatebyurl/) 310 | 311 | ## The Angular 10/9 Router-Outlets: Named and Multiple Outlets (Auxiliary Routes) Example 312 | 313 | In this tutorial, we'll see advanced uses of the `` component such as how to create named, multiple outlets and auxiliary routing 314 | 315 | 04 Aug 2020 316 | 317 | [Read article](https://www.techiediaries.com/angular-router-multiple-outlets/) 318 | 319 | ## RxJS Observables and Subjects Tutorial with Angular 10/9 320 | 321 | In this tutorial, we'll learn to use the RxJS 6 library with Angular 10/9. We'll learn about how to import the Observable class and the other operators. How to subscribe and unsubscribe from Observables, how to import and call operators and wrap them with the `pipe()` function. We'll also see how to use the async pipe to subscribe to Observables from templates 322 | 323 | 04 Aug 2020 324 | 325 | [Read article](https://www.techiediaries.com/observables-and-subjects-tutorial/) 326 | 327 | ## Multiple File/Image Upload with Django 3, Angular 10 and FormData 328 | 329 | Throughout this tutorial, we'll see how you can implement multiple file upload in Django 3. We'll be using Angular 10 to create a simple interface that allows the user to select multiple files and upload them to the server via POST requests and FormData 330 | 331 | 04 Aug 2020 332 | 333 | [Read article](https://www.techiediaries.com/angular-django-formdata-multiple-file-upload-tutorial/) 334 | 335 | ## Angular 10/9 ngForm, ngNoForm and Template Reference Variables 336 | 337 | In this quick tutorial, you'll learn how to use NgForm in Angular 10/8 to work with forms. You'll also learn about template reference variables and how you can use them to reference DOM elements or Angular built-in directives (such as ngForm) in your templates 338 | 339 | 04 Aug 2020 340 | 341 | [Read article](https://www.techiediaries.com/angular-ngform-ngnoform-template-reference-variable/) 342 | 343 | ## Angular 10/9 Router CanActivate Guards and UrlTree Parsed Routes 344 | 345 | We'll be learning how to use Router Guards and UrlTree data structures to protect the UI if the user is not logged in and redirect them to the login interface if they don't have access to a specific route. 346 | 347 | 04 Aug 2020 348 | 349 | [Read article](https://www.techiediaries.com/angular/angular-9-router-canactivate-guards-urltree-parsed-routes/) 350 | 351 | ## Angular 10/9 JWT Authentication Tutorial with Example 352 | 353 | In this tutorial, you'll learn, by example, how you can implement JWT authentication in your Angular 10/9 application 354 | 355 | 04 Aug 2020 356 | 357 | [Read article](https://www.techiediaries.com/angular/jwt-authentication-angular-9-example/) 358 | 359 | ## Style Angular 10/9 Components with CSS and ngStyle/ngClass Directives 360 | 361 | In this tutorial, we'll learn about CSS and how to use it in Angular 9. We'll see by example how an Angular 9 application generated by Angular CLI is styled 362 | 363 | 14 Jul 2020 364 | 365 | [Read article](https://www.techiediaries.com/angular/style-angular-9-components-with-css-ngstyle-ngclass/) 366 | 367 | ## Angular 10 HttpClient 368 | 369 | How to use HttpClient to make HTTP Requests in Angular 10 370 | 371 | 14 Jul 2020 372 | 373 | [Read article](https://www.techiediaries.com/angular-http-client/) 374 | 375 | ## Angular 10 FormBuilder/FormGroup/FormArray and FormControl By Example 376 | 377 | In this tutorial, we'll learn to use Angular forms by creating a simple example using FormBuilder, FormGroup and FormControl APIs 378 | 379 | 10 Jul 2020 380 | 381 | [Read article](https://www.techiediaries.com/angular-formbuilder-formgroup/) 382 | 383 | ## Angular 10/9 ElementRef/ViewChild/Renderer2 By Example 384 | 385 | In this tutorial, we'll be seeing an example of ElementRef with Angular 9/8. We'll use the online Stackblitz development IDE, so you don't need to set up your development environment or create an Angular project for this quick example 386 | 387 | 10 Jul 2020 388 | 389 | [Read article](https://www.techiediaries.com/angular-elementref/) 390 | 391 | ## How to Post/Upload FormData (multipart/form-data) with Angular 10, TypeScript and HttpClient 392 | 393 | In this quick tutorial, you'll learn how to work with FormData in Angular 10/9 and how to post it to a web server via a POST request and HttpClient 394 | 395 | 10 Jul 2020 396 | 397 | [Read article](https://www.techiediaries.com/angular-formdata/) 398 | 399 | ## Angular 10 Material Date Picker with Calendar and Date Range 400 | 401 | Angular 10 has been recently released and introduced some new features as usual with any new major release. Among the new features is adding the date range feature to the date picker component of Angular Material. 402 | 403 | 07 Jul 2020 404 | 405 | [Read article](https://www.techiediaries.com/angular-10-material-date-picker-calendar-range/) 406 | 407 | ## Integrating Google Analytics With Angular 10/9 408 | 409 | In this tutorial, we'll learn too integrate Google Analytics with our Angular 10/9 application. As always, you'll need to be familiar with HTML, CSS and JavaScript/TypeScript and since we'll be using Google Analytics with Angular, you'll need to know the basic concepts of the framework. 410 | 411 | 06 Jul 2020 412 | 413 | [Read article](https://www.techiediaries.com/integrate-google-analytics-angular-10-9/) 414 | 415 | ## Angular 10 Rating Example With Ng-Bootstrap, Select, ngValue, and Forms 416 | 417 | In this tutorial, we'll see by example how to create a rating component with Bootstrap 4, HTML Select and Angular 10 Forms. We'll be using the ngb-rating component from ng-bootstrap. We'll also see how to use the HTML select control with the ngFor directive inside a reactive form. How to bind select element to a TypeScript object or string literal using [ngValue] and value properties respectively, and how to assign a default value to select from an array of elements. 418 | 419 | 06 Jul 2020 420 | 421 | [Read article](https://www.techiediaries.com/angular-10-rating-form-example-ng-bootstrap-select-ngvalue/) 422 | 423 | ## Angular 10/9 File Upload Tutorial: Listen for HTTP Events & Progress Bar Example 424 | 425 | In this tutorial, we'll learn how to upload files in Angular 8. For the backend we'll be using Nest.JS. We'll see how to use HttpClient to send POST request with multipart form data which is used for file uploading. We'll also see how to use reactive forms and progress bar. 426 | 427 | 09 Jun 2020 428 | 429 | [Read article](https://www.techiediaries.com/angular-file-upload-progress-bar/) 430 | 431 | ## Angular Material 10/9 Tutorial: Build Navigation UI with Toolbar and Side Navigation Menu 432 | 433 | Angular Material 8 Tutorial: Build Navigation UI with Toolbar and Side Navigation Menu 434 | 435 | 09 Jun 2020 436 | 437 | [Read article](https://www.techiediaries.com/angular-material-navigation-toolbar-sidenav/) 438 | 439 | ## Upload Images In TypeScript/Node & Angular 9/Ionic 5: Working with Imports, Decorators, Async/Await and FormData 440 | 441 | In this tutorial part, we'll learn to customize/upload user profile photos. We assume no previous knowledge of TypeScript which is the programming language used in both Ionic/Angular and Node/Nest.js used to build both the front-end and back-end of our chat application. We'll be also explaining basic concepts such as imports, decorators, Async/Await and HTML5 FormData 442 | 443 | 06 Jun 2020 444 | 445 | [Read article](https://www.techiediaries.com/angular/upload-images-typescript-node-ionic-imports-decorators-async-await-formdata/) 446 | 447 | ## Angular 9/Ionic 5 Chat App: Unsubscribe from RxJS Subjects, OnDestroy/OnInit and ChangeDetectorRef 448 | 449 | In this tutorial part, we'll implement some changes in our Angular 9/Ionic 5 example app that will allow us to unsubscribe from the RxJS subjects and solve issues related to Angular Change Detection in development and duplicate messages displayed in the chat UI 450 | 451 | 06 Jun 2020 452 | 453 | [Read article](https://www.techiediaries.com/angular/unsubscribe-rxjs-subjects-ondestroy-oninit-changedetectorref/) 454 | 455 | ## Adding UI Guards, Auto-Scrolling, Auth State, Typing Indicators and File Attachments with FileReader to your Angular 9/Ionic 5 Chat App 456 | 457 | In this tutorial, we'll start by securing the UI of our application using Angular 9 guards then we'll learn how to add support for typing indicators and file attachments using the HTML5 FileReader API in the Ionic 5 and Angular 9 chat application we've built in these previous tutorials. We'll also see how to add automatic scrolling of the chat UI with Angular template variables and the Content.scrollToBottom() method and programmatically trigger click events on the file input element 458 | 459 | 06 Jun 2020 460 | 461 | [Read article](https://www.techiediaries.com/angular/ui-guards-auto-scrolling-filereader-ionic/) 462 | 463 | ## Private Chat Rooms in Angular 9/Ionic 5: Working with TypeScript Strings, Arrays, Promises, and RxJS Behavior/Replay Subjects 464 | 465 | Throughout this tutorial, we'll be learning how to add one-to-one private chat rooms to a chat application built using Angular 9, Ionic 5 , Node and Nest.js. We'll be working with TypeScript Strings, Arrays, Promises, and RxJS Behavior/Replay Subjects. We'll see how to convert a TypeScript promise to an RxJS Observable/Subject, how to use the async/await syntax with the Angular ngOnInit() method and Observable subscribe method, use the Angular Router, ActivatedRoute, and Ionic Storage services and also how to unsubscribe from the RxJS Observables with Angular OnDestroy and ngOnDestroy() 466 | 467 | 06 Jun 2020 468 | 469 | [Read article](https://www.techiediaries.com/angular/typescript-strings-arrays-promises-rxjs-behavior-replay-subjects/) 470 | 471 | ## Building a Chat App with TypeScript/Node.js, Ionic 5/Angular 9 & PubNub/Chatkit 472 | 473 | In this first part of a tutorial series to learn how to build a fullstack mobile application with cutting edge technologies like Ionic 5, Node.js (Nest.js), TypeScript, Angular 9. you will be creating the backend project of the application with Nest.js CLI and you'll learn about the available hosted and self-hosted services for implementing chat features in your mobile and web apps 474 | 475 | 06 Jun 2020 476 | 477 | [Read article](https://www.techiediaries.com/angular/typescript-node-ionic-chat/) 478 | 479 | ## Chat Read Cursors with Angular 9/Ionic 5 Chat App: Working with TypeScript Variables/Methods & Textarea Keydown/Focusin Events 480 | 481 | In this tutorial we'll implement chat read cursors in our Angular 9 and Ionic 5 Chat App using TypeScript basics like variables and methods, HTML textarea keydown/focusin events and data attributes 482 | 483 | 06 Jun 2020 484 | 485 | [Read article](https://www.techiediaries.com/angular/textarea-keydown-focusin-events/) 486 | 487 | ## Add JWT REST API Authentication to Your Node.js/TypeScript Backend with TypeORM and SQLite3 Database 488 | 489 | In this tutorial, we'll learn how to create a REST API server for JWT authentication using Node.js (Nest.js) and TypeScript for our Angular 9/Ionic 5 chat application 490 | 491 | 05 Jun 2020 492 | 493 | [Read article](https://www.techiediaries.com/angular/jwt-rest-api-auth-node-typescript-typeorm-database/) 494 | 495 | ## Building Chat App Frontend UI with JWT Auth Using Ionic 5/Angular 9 496 | 497 | In this tutorial, we are going to create the frontend mobile application using Ionic 5 and Angular 9 498 | 499 | 05 Jun 2020 500 | 501 | [Read article](https://www.techiediaries.com/angular/ionic-chat-ui-jwt-auth/) 502 | 503 | ## Build an Example Angular 10 Form: ngForm/ngModel vs FormGroup/FormBuilder 504 | 505 | In this tutorial, we'll learn how to build and work with forms in Angular 10 by creating a simple contact form example 506 | 507 | 04 May 2020 508 | 509 | [Read article](https://www.techiediaries.com/build-angular-form/) 510 | 511 | ## Adding Routing to your Angular 10 App by Example 512 | 513 | Adding Angular Routing to your Angular 10 App 514 | 515 | 04 May 2020 516 | 517 | [Read article](https://www.techiediaries.com/angular-routing-tutorial/) 518 | 519 | ## JavaScript Reactive/Asynchronous Code with RxJS 6, TypeScript & Angular 10: Callbacks, Promises and Observables 520 | 521 | In this tutorial, we'll learn to use the RxJS 6 library with Angular 10.9. We'll learn about how to import the Observable class and the other operators. How to subscribe and unsubscribe from Observables, how to import and call operators and wrap them with the `pipe()` function. We'll also see how to use the async pipe to subscribe to Observables from templates 522 | 523 | 04 May 2020 524 | 525 | [Read article](https://www.techiediaries.com/javascript-reactive-asynchronous-code-rxjs-6-angular-10/) 526 | 527 | ## What is an Angular 10 Workspace? 528 | 529 | What is an Angular 10 Workspace? 530 | 531 | 04 May 2020 532 | 533 | [Read article](https://www.techiediaries.com/angular-workspace/) 534 | 535 | ## Install Angular 10 CLI with NPM and Create a New Example App with Routing 536 | 537 | Angular 10 beta is released so the final release is due soon. Let's see how to install the latest beta version and create a new project 538 | 539 | 26 Apr 2020 540 | 541 | [Read article](https://www.techiediaries.com/angular/install-angular-10-cli-npm-create-new-example-app-routing/) 542 | 543 | ## Angular 10/9 Update Guide with Examples 544 | 545 | In this guide, we'll learn how to upgrade our project to the latest Angular 10 version and update the dependencies. 546 | 547 | 25 Apr 2020 548 | 549 | [Read article](https://www.techiediaries.com/angular-10-9-update-guide-examples/) 550 | 551 | ## Styling An Angular 10 Example App with Bootstrap 4 Navbar, Jumbotron, Tables, Forms and Cards 552 | 553 | 20 Apr 2020 554 | 555 | [Read article](https://www.techiediaries.com/angular/style-angular-10-example-bootstrap-4/) 556 | 557 | ## Integrate Bootstrap 4/jQuery with Angular 10 and Styling the UI With Navbar and Table CSS Classes 558 | 559 | In this Angular 10 tutorial we'll learn how to use Bootstrap 4 to build professional UIs 560 | 561 | 20 Apr 2020 562 | 563 | [Read article](https://www.techiediaries.com/angular/integrate-bootstrap-4-jquery-angular-10/) 564 | 565 | ## Angular 9/10 Tutorial By Example: REST CRUD APIs & HTTP GET Requests with HttpClient 566 | 567 | In this Angular 9/10 tutorial, we'll learn to build an Angular 9 example application going through all the required steps from creating/simulating a REST API, scaffolding a new project, setting up the essential APIs, and finally building and deploying your final application to the cloud 568 | 569 | 17 Apr 2020 570 | 571 | [Read article](https://www.techiediaries.com/angular/angular-9-8-tutorial-by-example-rest-crud-apis-http-get-requests-with-httpclient/) 572 | 573 | ## Angular 10/9 Services 574 | 575 | Learn about services in Angular 10 and previous versions 576 | 577 | 15 Apr 2020 578 | 579 | [Read article](https://www.techiediaries.com/angular-services/) 580 | 581 | ## Angular 10/9 Tutorial and Example: Build your First Angular App 582 | 583 | In this tutorial, you will learn to build your first Angular 10/9 application from scratch 584 | 585 | 14 Apr 2020 586 | 587 | [Read article](https://www.techiediaries.com/angular/angular-9-tutorial-and-example/) 588 | 589 | ## Angular 9/8 ngIf Tutorial & Example 590 | 591 | Throughout this quick tutorial, you'll be learning about how you can use ngIf in your Angular 6 applications 592 | 593 | 12 Apr 2020 594 | 595 | [Read article](https://www.techiediaries.com/angular/angular-9-ngif-tutorial-example/) 596 | 597 | ## Build an HTML Table Example Dynamically with Angular 10/9 and ngFor 598 | 599 | In this quick example, let's see how to build an HTML table dynamically with Angular 10 and the ngFor directive 600 | 601 | 12 Apr 2020 602 | 603 | [Read article](https://www.techiediaries.com/build-html-table-example-with-angular-9-8-ngfor/) 604 | 605 | ## Angular 10 New Features 606 | 607 | Angular 10, the next version of one of the most popular front-end frameworks is in beta version at this time. This means we are moving toward the final release of this new version 608 | 609 | 12 Apr 2020 610 | 611 | [Read article](https://www.techiediaries.com/angular/angular-10-new-features/) 612 | 613 | ## Create New Angular 9 Workspace and Application: Using Build and Serve 614 | 615 | In this article, we'll quickly see how to use the Angular CLI to initialize a new workspace and create an application 616 | 617 | 07 Apr 2020 618 | 619 | [Read article](https://www.techiediaries.com/angular/create-new-angular-9-workspace-app-build-serve/) 620 | 621 | ## Angular 10 Release Date: Angular 10 Will Focus on Ivy Artifacts and Libraries Support 622 | 623 | After the release of Angular 9, the development team says that the next release, Angular 10, will be focusing on Ivy artifacts 624 | 625 | 07 Apr 2020 626 | 627 | [Read article](https://www.techiediaries.com/angular/angular-10-release-date-ivy-artifacts-libraries-support/) 628 | 629 | ## HTML5 Download Attribute with TypeScript and Angular 9 630 | 631 | In this article, we'll learn by example what's the HTML download attribute and we'll see how to use it with TypeScript and Angular 9/8 by example 632 | 633 | 26 Mar 2020 634 | 635 | [Read article](https://www.techiediaries.com/angular/html-download-attribute-typescript-angular-9-example/) 636 | 637 | ## Angular 9.1+ Local Direction Query API: getLocaleDirection Example 638 | 639 | With Angular 9.1, you can query for the current local direction at runtime using the getLocaleDirection method 640 | 641 | 26 Mar 2020 642 | 643 | [Read article](https://www.techiediaries.com/angular/angular-9-1-local-direction-query-api-example/) 644 | 645 | ## Angular 9.1 displayBlock CLI Component Generator Option by Example 646 | 647 | In this article, we'll learn about the new displayBlock option for the Angular 9.1 CLI component generator 648 | 649 | 26 Mar 2020 650 | 651 | [Read article](https://www.techiediaries.com/angular/angular-9-1-displayblock-cli-component-generator-option-example/) 652 | 653 | ## Angular 9.1 New Features and Ivy: Angular 10 is Coming 654 | 655 | Angular 9 new features: better performance and smaller bundle size thanks to Ivy! 656 | 657 | 26 Mar 2020 658 | 659 | [Read article](https://www.techiediaries.com/angular/angular-9-new-features-and-ivy/) 660 | 661 | ## Angular 9 Basics Tutorial by Example 662 | 663 | In this tutorial, you will learn to build your first Angular 8 application from scratch 664 | 665 | 12 Mar 2020 666 | 667 | [Read article](https://www.techiediaries.com/angular/angular-9-basics-by-example-tutorial/) 668 | 669 | ## Angular 9/8 ngFor Directive: Render Arrays with ngFor by Example 670 | 671 | In this tutorial, you'll learn about the ngFor directive by example in Angular 9 672 | 673 | 10 Mar 2020 674 | 675 | [Read article](https://www.techiediaries.com/angular/angular-9-ngfor-directive-example/) 676 | 677 | ## Responsive Image Breakpoints Example with CDK's BreakpointObserver in Angular 9/8 678 | 679 | We'll learn how to implement responsive images in Angular 9/8 680 | 681 | 08 Mar 2020 682 | 683 | [Read article](https://www.techiediaries.com/angular/responsive-image-breakpoints-cdk-breakpointobserver-angular-9-8/) 684 | 685 | ## Angular 9/8 DOM Queries: ViewChild and ViewChildren Example 686 | 687 | The @ViewChild and @ViewChildren decorators in Angular provide a way to access and manipulate DOM elements, directives and components. In this tutorial, we'll see an Angular 8 example of how to use to use the two decorators 688 | 689 | 03 Mar 2020 690 | 691 | [Read article](https://www.techiediaries.com/angular/angular-9-dom-queries-viewchild-viewchildren-example/) 692 | 693 | ## Installing Node.js v10/12 & NPM on Ubuntu 20.04/19.04 694 | 695 | This post shows you how you can install Node.js on Ubuntu 19.01 and Ubuntu 20.04 for Angular 9 development 696 | 697 | 02 Mar 2020 698 | 699 | [Read article](https://www.techiediaries.com/ubuntu/install-nodejs-npm-on-ubuntu-20-04/) 700 | 701 | ## Angular 9 Examples: 2 Ways To Display A Component (Selector & Router) 702 | 703 | In this quick example, we'll see two ways of displaying a component in Angular 9 - using selectors or the router 704 | 705 | 02 Mar 2020 706 | 707 | [Read article](https://www.techiediaries.com/angular/angular-9-components-selector-router/) 708 | 709 | ## Angular 9/8 Components by Example 710 | 711 | This tutorial explains Angular 9/8 components, what are they? And how to create them? 712 | 713 | 02 Mar 2020 714 | 715 | [Read article](https://www.techiediaries.com/angular/angular-9-components-example/) 716 | 717 | ## The Angular 9/8 Router: Route Parameters with Snapshot and ParamMap by Example 718 | 719 | In this tutorial we're going to see how to handle route parameters with the Angular 9/8 Router using different methods: Snapshot and ParamMap Observable 720 | 721 | 02 Mar 2020 722 | 723 | [Read article](https://www.techiediaries.com/angular/angular-9-route-parameters-snapshot-parammap-example/) 724 | 725 | ## Angular 9/8 Tutorial: Http POST to Node/Express.js Example 726 | 727 | In this tutorial, we'll learn to use the template-driven approach in Angular 9/8 to work with HTML forms. We'll learn about the NgForm, ngModel and ngSubmit and how to create an authentication system with Node and Express.js 728 | 729 | 02 Mar 2020 730 | 731 | [Read article](https://www.techiediaries.com/angular/angular-9-http-post-node-express-example/) 732 | 733 | ## Angular 9/8 Nested Routing and Child Routes by Example 734 | 735 | In this tutorial, you'll learn to add Angular 9 routing to our module using a routing module, a nested router-outlet and child routes 736 | 737 | 02 Mar 2020 738 | 739 | [Read article](https://www.techiediaries.com/angular/angular-9-nested-routing-child-routes-example/) 740 | 741 | ## Angular 9/8 Feature and Root Modules by Example 742 | 743 | In this tutorial we will learn about Angular 9 modules by example 744 | 745 | 02 Mar 2020 746 | 747 | [Read article](https://www.techiediaries.com/angular/angular-9-feature-root-modules-example/) 748 | 749 | ## Angular 9/8 with PHP: Consuming a RESTful CRUD API with HttpClient and Forms 750 | 751 | In this tutorial, you'll learn to create an example Angular 7 application with a PHP REST API on top of a MySQL database 752 | 753 | 20 Feb 2020 754 | 755 | [Read article](https://www.techiediaries.com/angular/php-angular-9-crud-api-httpclient/) 756 | 757 | ## Angular 9/8 with PHP and MySQL Database: REST CRUD Example & Tutorial 758 | 759 | In this tutorial, you'll learn to create an example Angular 9/8 application with a PHP REST API on top of a MySQL database 760 | 761 | 20 Feb 2020 762 | 763 | [Read article](https://www.techiediaries.com/angular/angular-9-php-mysql-database/) 764 | 765 | ## Unit Testing Angular 9/8 Apps Tutorial with Jasmine & Karma by Example 766 | 767 | In this tutorial, we'll quickly learn how to unit test an Angular 9/8 application with Jasmine and Karma 768 | 769 | 19 Feb 2020 770 | 771 | [Read article](https://www.techiediaries.com/angular/unit-testing-angular-9-apps-tutorial-jasmine-karma-example/) 772 | 773 | ## Jasmine Unit Testing Angular 9 Tutorial 774 | 775 | In this tutorial, we'll present you with a quick and complete guide to testing with Jasmine in Angular 9 776 | 777 | 19 Feb 2020 778 | 779 | [Read article](https://www.techiediaries.com/angular/jasmine-unit-testing-angular-9-tutorial/) 780 | 781 | ## Angular 9 Web Components: Custom Elements & Shadow DOM 782 | 783 | Throughout this tutorial, we’ll teach you to create a native web component using the latest Angular 9 version. Part of standard web components are custom elements and shadow DOM which provide a way to extend HTML by creating your custom HTML tags and encapsulating the DOM tree and CSS styles behind other elements 784 | 785 | 18 Feb 2020 786 | 787 | [Read article](https://www.techiediaries.com/angular/angular-9-web-components-custom-elements-shadow-dom/) 788 | 789 | ## Angular 9 Renderer2 with Directives Tutorial by Example 790 | 791 | In this tutorial, we'll be learning about Renderer2 in Angular 9/8 and directives which allow you to manipulate DOM. Renderer2 is a service which provides methods like `createElement`, `createText`, `appendChild` and `addClass` that help you query and manipulate the DOM elements in your Angular 9 application 792 | 793 | 18 Feb 2020 794 | 795 | [Read article](https://www.techiediaries.com/angular/angular-9-renderer2-directives-tutorial-example/) 796 | 797 | ## Build Progressive Web Apps (PWA) with Angular 9/8 Tutorial and Example 798 | 799 | Throughout this tutorial, we'll be learning to build an Angular 9 PWA (Progressive Web Application) 800 | 801 | 18 Feb 2020 802 | 803 | [Read article](https://www.techiediaries.com/angular/angular-9-pwa-tutorial-example/) 804 | 805 | ## Angular 9 Internationalization/Localization with ngx-translate Tutorial and Example 806 | 807 | In this tutorial, we'll see by example how to make your Angular 9 app available in multiple languages (English and French) using ngx-translate, the internationalization (i18n) and localization library for Angular 808 | 809 | 18 Feb 2020 810 | 811 | [Read article](https://www.techiediaries.com/angular/angular-9-internationalization-ngx-translate-tutorial-example/) 812 | 813 | ## Create Angular 9 Calendar with ngx-bootstrap datepicker Example and Tutorial 814 | 815 | In this tutorial, we'll see how to create an Angular 9 calendar UI with the datepicker component available from ngx-bootstrap 816 | 817 | 18 Feb 2020 818 | 819 | [Read article](https://www.techiediaries.com/angular/angular-9-calendar-ngx-bootstrap-datepicker-tutorial/) 820 | 821 | ## Multiple File Upload with Angular 9 FormData and PHP by Example 822 | 823 | 14 Feb 2020 824 | 825 | [Read article](https://www.techiediaries.com/angular/multiple-file-upload-angular-9-formdata-php-example/) 826 | 827 | ## Angular 9/8 Reactive Forms with Validation Tutorial by Example 828 | 829 | In this tutorial, we'll learn to use the template-driven approach in Angular 9/8 to work with forms. We'll learn about the NgForm, ngModel and ngSubmit and how to create an authentication system with Node and Express.js 830 | 831 | 14 Feb 2020 832 | 833 | [Read article](https://www.techiediaries.com/angular/angular-9-reactive-forms-validation-tutorial-example/) 834 | 835 | ## Angular 9/8 Template Forms Tutorial: Example Authentication Form (ngModel/ngForm/ngSubmit) 836 | 837 | In this tutorial, we'll learn to use the template-driven approach in Angular 7/8 to work with forms. We'll learn about the NgForm, ngModel and ngSubmit and how to create an authentication system with Node and Express.js 838 | 839 | 14 Feb 2020 840 | 841 | [Read article](https://www.techiediaries.com/angular/angular-9-template-forms-tutorial-example/) 842 | 843 | ## Angular 9/8 JAMStack By Example 844 | 845 | let's learn to build a JAMstack application with Angular 9, HTML and a third-party API. The app is simply a news app that can be served from a CDN like Netlify. It's made of only HTML, CSS and JavaScript 846 | 847 | 10 Feb 2020 848 | 849 | [Read article](https://www.techiediaries.com/angular/angular-jamstack-example/) 850 | 851 | ## Angular HttpClient v9/8 — Building a Service for Sending API Calls and Fetching Data 852 | 853 | In this tutorial, you'll be learning, by example, how to use Angular 7/8 and HttpClient to send HTTP requests to remote servers for fetching, creating and updating data. 854 | 855 | 07 Feb 2020 856 | 857 | [Read article](https://www.techiediaries.com/angular/angular-httpclient-9-8-service-api-calls-and-fetching-data/) 858 | 859 | ## Upgrade Angular 8/7 to Angular 9 With Ng Update & Angular CLI v9 860 | 861 | In this short guide we'll see how to update Angular core framework and Angular CLI 8/7 to the latest Angular 9 version and upgrading existing projects to use v9 862 | 863 | 07 Feb 2020 864 | 865 | [Read article](https://www.techiediaries.com/angular/upgrade-angular-8-7-to-angular-9-with-cli-ng-update/) 866 | 867 | ## Build an Angular 9/8 CRUD Example & Tutorial 868 | 869 | In this tutorial, we'll learn to build an Angular CRUD example from scratch using the latest version which is as the time of this writing Angular 9 870 | 871 | 05 Feb 2020 872 | 873 | [Read article](https://www.techiediaries.com/angular/angular-9-8-crud-example-and-tutorial/) 874 | 875 | ## Styling An Angular 9/8/7 Example App with Bootstrap 4 Navbar, Jumbotron, Tables, Forms and Cards 876 | 877 | In this tutorial, we'll learn how to integrate and use bootstrap 4 with Angular 9. 878 | 879 | 04 Feb 2020 880 | 881 | [Read article](https://www.techiediaries.com/angular/styling-angular-9-8-7-example-with-bootstrap-4-navbar-tables-forms-and-cards/) 882 | 883 | ## Angular 9/8 CLI Commands: Install Angular CLI On Windows 10, Linux and macOS 884 | 885 | In this tutorial you'll be learning how to use Angular CLI 9 (the latest version as of this writing) on Windows, Linux and macOS to create Angular applications and different constructs like modules, services, components and pipes etc. 886 | 887 | 24 Jan 2020 888 | 889 | [Read article](https://www.techiediaries.com/angular/angular-9-8-cli-commands-install-angular-cli-on-windows-10-linux-and-macos/) 890 | 891 | ## Angular 9/8/7 Realtime Chat Example with Node.js, Socket.io and WebSocket 892 | 893 | In this tutorial, we'll learn how to build a real-time app with Angular 9/8, Socket.IO, WebSocket, and Node.js 894 | 895 | 15 Jan 2020 896 | 897 | [Read article](https://www.techiediaries.com/angular-9-realtime-chat-example-with-nodejs-socketio-and-websocket/) 898 | 899 | ## Angular 9/8/7 Routing Tutorial: Angular Router by Example with Parameters and Guards 900 | 901 | In this tutorial, you will learn to implement routing in Angular 9/8/7 902 | 903 | 15 Jan 2020 904 | 905 | [Read article](https://www.techiediaries.com/angular-9-8-7-routing-tutorial-angular-router-by-example-with-parameters-and-guards/) 906 | 907 | ## RxJS Observable Pipe, Subscribe, Map and Filter Examples with Angular 9/8 908 | 909 | In this tutorial we'll learn by example to use the RxJS pipe() function, the map() and filter() operators in Angular 9. And how to use the subscribe() method to subscribe to Observables 910 | 911 | 05 Jan 2020 912 | 913 | [Read article](https://www.techiediaries.com/observable-pipe-subscribe-map-and-filter-examples/) 914 | 915 | ## Angular 9/8 Ajax Get and Post Requests Example 916 | 917 | In this post, we'll create a simple example with Angular 9/8 and HttpClient that sends Get and Post requests to fetch and post data from/to a backend server 918 | 919 | 04 Jan 2020 920 | 921 | [Read article](https://www.techiediaries.com/angular-9-ajax-get-and-post-requests-example/) 922 | 923 | ## Angular 8/7 Tutorial By Example: (REST API, HttpClient GET, Components, Services & ngFor) 924 | 925 | In this tutorial, you'll learn by example how to send GET requests to REST API servers in your Angular 8 application using HttpClient. We’ll also learn how to use the basic concepts of Angular like components and services and how to use the ngFor directive to display collections of data. 926 | 927 | 03 Jan 2020 928 | 929 | [Read article](https://www.techiediaries.com/angular/angular-8-7-tutorial-example-rest-api-httpclient-get-ngfor/) 930 | 931 | ## Angular 9/8 (Reactive) Forms: How to Use FormBuilder, FormGroup and FormControl APIs by Example 932 | 933 | In this tutorial, we'll learn to use Angular forms by creating a simple example using the reactive form approach. We'll see how to use Angular `FormBuilder, FormGroup and FormControl APIs to easily build a form 934 | 935 | 30 Dec 2019 936 | 937 | [Read article](https://www.techiediaries.com/angular-forms/) 938 | 939 | ## Angular 9/8 How-To: What is the Router-Outlet and how to use it? 940 | 941 | The router-outlet is a directive that's available from the @angular/router package and is used by the router to mark where in a template, a matched component should be inserted. 942 | 943 | 27 Dec 2019 944 | 945 | [Read article](https://www.techiediaries.com/angular-9-8-router-outlet/) 946 | 947 | ## Angular 9/8 How-To: Build a Material File Upload UI with MatProgressBar, MatButton , MatIcon and MatCard 948 | 949 | In this quick how-to tutorial, we'll see how to build a file/image uploading UI with Angular 9 Material components such as MatProgressBar, MatIcon, MatCard, and MatButton 950 | 951 | 27 Dec 2019 952 | 953 | [Read article](https://www.techiediaries.com/angular-9-8-material-file-upload-with-progressbar/) 954 | 955 | ## Angular 9/8 Http - How to Use HttpClient Module with Examples 956 | 957 | In this how-to tutorial, we'll learn what is the HttpClient API available from HttpClientModule and how to use it in Angular 9 by example with request timeout, responsetype, query parameters, http headers, custom http headers, interceptors, typed and full responses, and error handling. 958 | 959 | 27 Dec 2019 960 | 961 | [Read article](https://www.techiediaries.com/angular-http-client/) 962 | 963 | ## Angular 9/8 How-To: Create Angular Components? 964 | 965 | In this quick how-to post, we'll learn how to use the ng generate component command of Angular CLI, or its ng g c shortcut command, for creating Angular components in your project. 966 | 967 | 24 Dec 2019 968 | 969 | [Read article](https://www.techiediaries.com/how-to-create-angular-9-8-components/) 970 | 971 | ## Angular 9/8 How-To: Pass URL Query Parameters with HttpClient, HttpParams and fromString 972 | 973 | In this how-to article, we'll learn how to use fromString and HttpParams to pass query parameters to URLs or REST API endpoints 974 | 975 | 22 Dec 2019 976 | 977 | [Read article](https://www.techiediaries.com/angular-9-8-url-query-parameters-with-httpparams-and-fromstring/) 978 | 979 | ## Angular 9/8/7 Tutorial: Build an Example App with Angular CLI, Angular Router, HttpClient & Angular Material 980 | 981 | Throughout this Angular 9 tutorial, we’ll learn to build an example web application using APIs like HttpClient, Angular Router, and Material Design. We'll learn to generate components and services using Angular CLI and depoly your final app to the cloud (Firebase). 982 | 983 | 21 Dec 2019 984 | 985 | [Read article](https://www.techiediaries.com/angular-9-8-7-tutorial-build-an-example-app-with-angular-cli-router-httpclient-and-angular-material/) 986 | 987 | ## Angular 9/8/7 How-To: Handle HttpClient Errors with RxJS' catchError() and throwError() 988 | 989 | In this quick how-to article, we'll see by example how to handle Http errors in Angular 9 apps 990 | 991 | 21 Dec 2019 992 | 993 | [Read article](https://www.techiediaries.com/handle-angular-9-8-7-httpclient-errors-with-rxjs-catcherror-and-throwerror/) 994 | 995 | ## Angular 9/8 How-To: Use Angular CLI to Initialize & Serve New Angular Projects 996 | 997 | In this quick how-to tutorial, we'll see how to use Angular CLI v9, as of this writing, to generate a project and serve it locally using a live-reload development server. 998 | 999 | 21 Dec 2019 1000 | 1001 | [Read article](https://www.techiediaries.com/use-angular-cli-to-initialize-and-serve-new-angular-9-8-projects/) 1002 | 1003 | ## Angular 9/8 Services & Dependency Injection via providedIn, root & any Tutorial 1004 | 1005 | In this tutorial, we'll be learning about Angular services using the latest Angular 9 version. We'll also learn about dependency injection and its mechanisms such as the `@Injectable` decorator and the providedIn property which can take the root and any values or a specific module that will be explaining next. 1006 | 1007 | 12 Dec 2019 1008 | 1009 | [Read article](https://www.techiediaries.com/angular-9-8-services-and-dependency-injection-via-providedin-tutorial/) 1010 | 1011 | ## Angular 9/8 How-To: Path Redirection and Handling 404 Paths Using Router Wildcard Routes 1012 | 1013 | In this quick example, we'll see how to redirect users to a new URL path or component using the Angular router and how to deal with not found pages and redirect to a 404 component if no match is found using wildcard paths 1014 | 1015 | 12 Dec 2019 1016 | 1017 | [Read article](https://www.techiediaries.com/angular-9-8-path-redirection-and-handling-404-using-wildcard-routes/) 1018 | 1019 | ## Angular 9/8 MEAN Stack Authentication Tutorial & Example: Node and MongoDB Backend 1020 | 1021 | In this step by step tutorial, we'll be building an example app with JWT authentication and REST APIs based on the MEAN stack. We'll be using Angular 9 for the frontend and Node.js along with Express and MongoDB in the backend 1022 | 1023 | 11 Dec 2019 1024 | 1025 | [Read article](https://www.techiediaries.com/angular-9-8-mean-stack-authentication-tutorial-and-example-with-node-and-mongodb/) 1026 | 1027 | ## Angular 9 CRUD Tutorial: Consume a Python/Django CRUD REST API 1028 | 1029 | Throughout this tutorial for beginners, we'll learn to build a full-stack example web application with Angular 9, the latest version of the most popular framework/platform for building mobile and desktop client side applications created and used internally by Google. 1030 | 1031 | 06 Dec 2019 1032 | 1033 | [Read article](https://www.techiediaries.com/angular-crud-tutorial-consume-a-rest-api/) 1034 | 1035 | ## Angular 7/8 By Example with HttpClient, Async Pipe and Observables 1036 | 1037 | How to use HttpClient to make HTTP GET requests in Angular 7/8 1038 | 1039 | 04 Dec 2019 1040 | 1041 | [Read article](https://www.techiediaries.com/angular-by-example-httpclient-get/) 1042 | 1043 | ## Angular 9 Examples: Conditional Rendering With *ngIf & Else 1044 | 1045 | In this example, we'll see how to conditionally render a component or HTML element in Angular 9 using the *ngIf directive 1046 | 1047 | 22 Nov 2019 1048 | 1049 | [Read article](https://www.techiediaries.com/angular-conditional-rendering-example-with-ngif-directive/) 1050 | 1051 | ## How to Check Installed Angular CLI Version & Update to Latest Angular 9 Version Globally 1052 | 1053 | In this quick tutorial, we'll see how to check the currently-installed Angular CLI version and update it to the latest Angular 9 1054 | 1055 | 18 Nov 2019 1056 | 1057 | [Read article](https://www.techiediaries.com/check-angular-cli-version-and-update-to-latest-angular-version/) 1058 | 1059 | ## Angular 9/8 Tutorial & Example — Upload files with FormData, HttpClient, RxJS, and Material ProgressBar 1060 | 1061 | In this tutorial, we’ll see by example how to upload multiple image files using FormData, HttpClient (for posting multipart/form-data), Angular 9/8 and TypeScript 1062 | 1063 | 14 Nov 2019 1064 | 1065 | [Read article](https://www.techiediaries.com/angular-9-8-tutorial-example-upload-files-with-formdata-httpclient-rxjs-and-material-progressbar/) 1066 | 1067 | ## Import & Read Local JSON Files in Angular 7/8 and TypeScript 2.9+ 1068 | 1069 | In this tutorial, we'll see by example how to import and read local JSON files in Angular 8 applications and TypeScript 2.9+ 1070 | 1071 | 20 Oct 2019 1072 | 1073 | [Read article](https://www.techiediaries.com/import-local-json-files-in-typescript/) 1074 | 1075 | ## RxJS of() Example: Mocking Data with an Angular 7/8 Service and Observables 1076 | 1077 | In this tutorial, we'll learn by example how to use the of() operator of RxJS with Angular 8 1078 | 1079 | 20 Oct 2019 1080 | 1081 | [Read article](https://www.techiediaries.com/rxjs-of-tutorial-and-example/) 1082 | 1083 | ## Fixing CORS Issues in Your Front-End Angular 7/8 App with Angular CLI Proxy Configuration 1084 | 1085 | In this tutorial we'll learn in a few steps how to fix CORS issues in our front-end Angular 8 app using the Angular CLI proxy configuration 1086 | 1087 | 20 Oct 2019 1088 | 1089 | [Read article](https://www.techiediaries.com/fix-cors-with-angular-cli-proxy-configuration/) 1090 | 1091 | ## 3 Methods for Reading Local JSON Files in Angular 7/8 1092 | 1093 | In this tutorial, we'll present you 3 ways to read local JSON files in your Angular 8 application with examples 1094 | 1095 | 20 Oct 2019 1096 | 1097 | [Read article](https://www.techiediaries.com/angular-local-json-files/) 1098 | 1099 | ## Angular 7/8 HttpClient Interceptors: Mocking HTTP Requests Example 1100 | 1101 | In this tutorial, we'll learn by example to use HttpClient Interceptors to mock a back-end for your Angular 8 app. This way you can develop your Angular 8 app without a back-end 1102 | 1103 | 20 Oct 2019 1104 | 1105 | [Read article](https://www.techiediaries.com/angular-interceptors-mock-http-requests-example/) 1106 | 1107 | ## Backendless Angular 9/8 Tutorial: Mocking HttpClient Using an In-Memory CRUD API Example 1108 | 1109 | In this tutorial, you'll see, by example, how to use the in-memory web api module with Angular 8 to create a fake REST API back-end with CRUD operations. This is very useful for front-end developers that don't have a back-end yet or for testing your front-end app. 1110 | 1111 | 17 Oct 2019 1112 | 1113 | [Read article](https://www.techiediaries.com/angular-inmemory-web-api/) 1114 | 1115 | ## Modern and Legacy JavaScript: Differential Loading with Angular 8 Tutorial 1116 | 1117 | In this JavaScript tutorial designed for Angular developers, we'll learn how Angular 8 makes differential loading to send separate modern and legacy JavaScript bundles to web browsers based on their capabilities thanks to the module and nomodule attributes and browserslist. Next, we'll introduce the various new features of modern JavaScript to Angular devs then finally we'll see how to include custom JavaScript code in our Angular apps 1118 | 1119 | 19 Sep 2019 1120 | 1121 | [Read article](https://www.techiediaries.com/javascript-tutorial-and-example/) 1122 | 1123 | ## CSS Tutorial with Angular 9/8: ngClass, ngStyle & ViewEncapsulation 1124 | 1125 | In this tutorial, we'll learn about CSS and how to use it in Angular apps. We'll see by example how an Angular 8 application generated by Angular CLI is styled 1126 | 1127 | 15 Sep 2019 1128 | 1129 | [Read article](https://www.techiediaries.com/css-tutorial/) 1130 | 1131 | ## HTML Tutorial: Angular 7/8 Template Syntax - Interpolation, ngFor & ngIf Directives 1132 | 1133 | In this tutorial, we’ll teach you HTML which is used as the template language for Angular. We’ll build a simple HTML app before tackling any Angular concepts since it’s a prerequisite in any web development and one of the three pillars of the web along with JavaScript and CSS. 1134 | 1135 | 14 Sep 2019 1136 | 1137 | [Read article](https://www.techiediaries.com/html-tutorial/) 1138 | 1139 | ## GraphQL Tutorial with Angular 7/8 and Apollo Example 1140 | 1141 | In this tutorial, we'll teach you about the fundamental GraphQL concepts starting with an introduction and then explain the building blocks for a GraphQL API. Next, we'll learn to consume a GraphQL API with Angular 7/8 and Apollo 1142 | 1143 | 14 Sep 2019 1144 | 1145 | [Read article](https://www.techiediaries.com/graphql-tutorial/) 1146 | 1147 | ## Responsive Images Tutorial for Angular 7/8 Devs 1148 | 1149 | Responsive images are a necessity in this interconnected world. A website needs to work well on multiple devices, as users may access your site through their phone, tablet or laptop. This tutorial will explain what are responsive images and provide some tips to help you apply them. We'll also see how to implement responsive images in Angular 7/8 1150 | 1151 | 13 Sep 2019 1152 | 1153 | [Read article](https://www.techiediaries.com/responsive-images-tutorial/) 1154 | 1155 | ## Angular 7/8 & Bootstrap 4 UIs: ng-bootstrap and ngx-bootstrap [Part 1] 1156 | 1157 | In this tutorial series, you'll learn to use Angular 7/8 & Bootstrap 4 to build professional grade UIs. 1158 | 1159 | 11 Sep 2019 1160 | 1161 | [Read article](https://www.techiediaries.com/angular-bootstrap-ui/) 1162 | 1163 | ## Angular 7/8 Tutorial Course — Build a Portfolio Web Application with Angular 1164 | 1165 | Angular 8 is out and we'll use it to continue with our front-end tutorial series designed for Python developers. This tutorial is part of an ongoing series for teaching Angular to Python developers. Saying that; this tutorial can be also followed by front-end developers that don't use Python as their back-end language. 1166 | 1167 | 10 Sep 2019 1168 | 1169 | [Read article](https://www.techiediaries.com/angular-tutorial-basics/) 1170 | 1171 | ## JavaScript Promises Tutorial with Angular 7/8 Example 1172 | 1173 | In this tutorial designed for Angular developers, you'll learn about JavaScript Promises introduced in ES6 and you'll see how you can use them with an Angular 7/8 example. 1174 | 1175 | 05 Sep 2019 1176 | 1177 | [Read article](https://www.techiediaries.com/javascript-promises-tutorial-example/) 1178 | 1179 | ## JavaScript Async/Await with Angular 7/8 Observable and HTTP Example 1180 | 1181 | In this tutorial, we'll learn about JavaScript/ES7 async and await keywords and we'll see how you can use them to write better asynchronous code in your Angular 7/8 apps with an example using HttpClient for sending HTTP requests and RxJS Observables. 1182 | 1183 | 05 Sep 2019 1184 | 1185 | [Read article](https://www.techiediaries.com/javascript-async-await-tutorial/) 1186 | 1187 | ## CSS Grid Layout Tutorial: Holy Grail Angular 10 UI 1188 | 1189 | This CSS Grid layout tutorial is designed for Angular 7/8 developers that want to learn how to build responsive layouts with modern CSS. We'll first start with a general introduction to learn about the basic concepts and then we'll see how to use it within an Angular 7/8 app to create the famous holy grail layout. 1190 | 1191 | 04 Sep 2019 1192 | 1193 | [Read article](https://www.techiediaries.com/css-grid-layout-tutorial/) 1194 | 1195 | ## Webpack 4 Tutorial with Angular 10 1196 | 1197 | In this tutorial, we'll be introducing Webpack to Angular developers. We'll also see a simple example of using a custom webpack configuration in Angular 10 1198 | 1199 | 01 Sep 2019 1200 | 1201 | [Read article](https://www.techiediaries.com/webpack-tutorial/) 1202 | 1203 | ## Angular Semantic Versions 1204 | 1205 | Learn about Angular versions 1206 | 1207 | 23 Aug 2019 1208 | 1209 | [Read article](https://www.techiediaries.com/angular-versions/) 1210 | 1211 | ## Angular 8 Book: Build your first web apps with Angular 8 1212 | 1213 | Practical Angular: Build your first web apps with Angular 8 1214 | 1215 | 11 Aug 2019 1216 | 1217 | [Read article](https://www.techiediaries.com/angular-book-build-your-first-web-apps/) 1218 | 1219 | ## TypeScript Tutorial for Angular 7/8 Devs 1220 | 1221 | In this tutorial, we'll learn about TypeScript. The language of Angular 1222 | 1223 | 29 Jul 2019 1224 | 1225 | [Read article](https://www.techiediaries.com/typescript-tutorial/) 1226 | 1227 | ## The OOP Concepts with TypeScript: Inheritance, Abstraction, Polymorphism and Encapsulation 1228 | 1229 | In this article, we'll learn about the Object Oriented Programming or OOP concepts in TypeScript such as inheritance, abstraction, polymorphism and encapsulation. 1230 | 1231 | 29 Jul 2019 1232 | 1233 | [Read article](https://www.techiediaries.com/object-oriented-programming-concepts/) 1234 | 1235 | ## CSS Centering with Angular 7/8 Example 1236 | 1237 | In this tutorial, we'll learn how to center elements in CSS and Angular 8 1238 | 1239 | 23 Jul 2019 1240 | 1241 | [Read article](https://www.techiediaries.com/css-centering/) 1242 | 1243 | ## FormData Explained + Ajax, Angular 9, Ionic 5, and React Examples 1244 | 1245 | 16 Jul 2019 1246 | 1247 | [Read article](https://www.techiediaries.com/formdata/) 1248 | 1249 | ## PHP Tutorial with Angular 8 1250 | 1251 | In this tutorial, we'll learn web development with php and we'll compare php with various solutions such as Python & Django and Ruby On Rails 1252 | 1253 | 08 Jun 2019 1254 | 1255 | [Read article](https://www.techiediaries.com/php-tutorial/) 1256 | 1257 | ## Angular 10 Material Design Tutorial & Example 1258 | 1259 | In this tutorial, we'll be learning how to use Angular 8 Material Design to build a beautiful and professional grade UI interface for our Angular front-end application 1260 | 1261 | 06 Jun 2019 1262 | 1263 | [Read article](https://www.techiediaries.com/angular-material-tutorial-example/) 1264 | 1265 | ## Angular 8 Tutorial: Build your First Angular App 1266 | 1267 | In this tutorial, you will learn to build your first Angular 8 application from scratch. 1268 | 1269 | 04 Jun 2019 1270 | 1271 | [Read article](https://www.techiediaries.com/angular-8-tutorial-build-first-angular-calculator-app/) 1272 | 1273 | ## Django REST Framework Image File Upload Tutorial & Example [FormData & Angular 7 UI] 1274 | 1275 | Throughout this tutorial, we'll see how you can implement file upload in Django and Django REST Framework with a step by step example. Our application will expose an /upload endpoint that accepts POST requests that contain the file posted with a multipart/form-data content type using FormData. For the frontend, we'll be using Angular 7 to create a simple interface that allows the user to select a file and upload it to the server via a POST request and FormData. 1276 | 1277 | 08 Mar 2019 1278 | 1279 | [Read article](https://www.techiediaries.com/django-rest-image-file-upload-tutorial/) 1280 | 1281 | ## PHP Image/File Upload Tutorial and Example [FormData and Angular 7 Front-End] 1282 | 1283 | In this tutorial, you'll learn how you can upload files in your PHP web application. We'll not use any framework but plain PHP. Next, we'll see how we can use Angular 7 to create a frontend that provides a form for uploading an image file to the backend using FormData and HttpClient. We'll be also looking at how to create a reactive form with Angular. 1284 | 1285 | 06 Mar 2019 1286 | 1287 | [Read article](https://www.techiediaries.com/php-file-upload-tutorial/) 1288 | 1289 | ## Angular 7|6 Tutorial Course: CLI, Components, Routing & Bootstrap 4 1290 | 1291 | In this course, you'll learn to develop your first Angular 7 application with routing, CRUD operations and Bootstrap 4 UI 1292 | 1293 | 27 Dec 2018 1294 | 1295 | [Read article](https://www.techiediaries.com/angular-course/) 1296 | 1297 | ## Angular 7|6 Tutorial Course: Authentication with Firebase (Email & Password) 1298 | 1299 | In this course, you'll learn to develop your first Angular 7 application with routing, CRUD operations and Bootstrap 4 UI 1300 | 1301 | 27 Dec 2018 1302 | 1303 | [Read article](https://www.techiediaries.com/angular-course-firebase-authentication/) 1304 | 1305 | ## Angular 7! 1306 | 1307 | Angular 7 beta is released 1308 | 1309 | 15 Aug 2018 1310 | 1311 | [Read article](https://www.techiediaries.com/angular-7/) 1312 | 1313 | ## Getting started with Material Design 6 in Angular 6 1314 | 1315 | How to get started with Material Design 6 in Angular 6 1316 | 1317 | 28 Jul 2018 1318 | 1319 | [Read article](https://www.techiediaries.com/angular-material-design/) 1320 | 1321 | ## Deploying Angular 6|7 Apps to Github Pages 1322 | 1323 | In this tutorial we'll see how to deploy Angular 6 apps to Github pages 1324 | 1325 | 27 Jul 2018 1326 | 1327 | [Read article](https://www.techiediaries.com/deploy-angular-github-pages/) 1328 | 1329 | ## Building Angular 6|7 Universal Apps (Server Side Rendering) 1330 | 1331 | In this tutorial we'll see how to render Angular 6 universal apps on the server 1332 | 1333 | 27 Jul 2018 1334 | 1335 | [Read article](https://www.techiediaries.com/angular-4-universal-server-side-rendering/) 1336 | 1337 | ## RxJS 6 for Angular Developers Tutorial by Example 1338 | 1339 | In this RxJS 6 tutorial you'll learn about the latest version of RxJS, a library that implements Reactive programming in JavaScript. You'll learn about the core RxJS 6 concepts such as Observables, Observers, Subjects, Streams, Subscriptions and Operators. 1340 | 1341 | 18 Jul 2018 1342 | 1343 | [Read article](https://www.techiediaries.com/rxjs-tutorial/) 1344 | 1345 | ## Angular 6|7 Router: Lazy Loading Modules Tutorial (loadChildren() Example) 1346 | 1347 | In this tutorial, we'll see by example Angular 6 routing and lazy loading components using feature modules and the loadChildren() method 1348 | 1349 | 17 Jul 2018 1350 | 1351 | [Read article](https://www.techiediaries.com/angular-routing-lazy-loading-loadchildren/) 1352 | 1353 | ## Ionic 4/Angular Tutorial - Ionic 4 Router (Routing and Navigation Example) 1354 | 1355 | Throughout this tutorial, we'll see how to add routing to Ionic 4 with the Angular 6 router 1356 | 1357 | 25 Jun 2018 1358 | 1359 | [Read article](https://www.techiediaries.com/ionic-4-angular-routing/) 1360 | 1361 | ## Ionic 4 Upgrade: Updating From Ionic 3 to Ionic 4/Angular 6 1362 | 1363 | Throughout this tutorial, we'll see how to upgrade your Angular 6 project to use RxJS 6 1364 | 1365 | 20 Jun 2018 1366 | 1367 | [Read article](https://www.techiediaries.com/ionic-angular-upgrade/) 1368 | 1369 | ## Angular 6 Upgrade: Migrating to RxJS 6 1370 | 1371 | Throughout this tutorial, we'll see how to upgrade your Angular 6 project to use RxJS 6 1372 | 1373 | 19 Jun 2018 1374 | 1375 | [Read article](https://www.techiediaries.com/angular-6-upgrade-rxjs-6/) 1376 | 1377 | ## Learn Angular: Full-Stack & CRUD Angular 7/8 PDF Tutorial 1378 | 1379 | In this Angular 7/8 PDF tutorial, you'll going to learn how to build full-stack web applications with Angular 8 and a Python back-end. 1380 | 1381 | 09 Jun 2018 1382 | 1383 | [Read article](https://www.techiediaries.com/angular-6-tutorial-pdf/) 1384 | 1385 | ## Angular 6|5 Tutorial: Integrating Angular with Django 1386 | 1387 | In this tutorial we'll see how we can integrate the Angular 6 front-end application with the Django back-end. 1388 | 1389 | 29 May 2018 1390 | 1391 | [Read article](https://www.techiediaries.com/django-angular-tutorial/) 1392 | 1393 | ## Angular Tutorial (Updated to Angular 7) 1394 | 1395 | In this tutorial series we'll cover, the new Angular 6 features, the basics and the in-depth concepts of Angular 4/5/6 framework, starting with how to install the Angular CLI 6 and how to upgrade an existing Angular 5 project to Angular 6. 1396 | 1397 | 24 Apr 2018 1398 | 1399 | [Read article](https://www.techiediaries.com/angular-4-tutorial/) 1400 | 1401 | ## Single Page Apps with Flask and Angular 4|5 Tutorial Series 1402 | 1403 | In this tutorial series we'll be using Python, Flask, SQLAlchemy and Angular 5 to build a modern RESTful web application with an architecture that consists of a front-end application with Angular 5 and a back-end REST API using Flask. 1404 | 1405 | 04 Apr 2018 1406 | 1407 | [Read article](https://www.techiediaries.com/flask-angular-tutorial/) 1408 | 1409 | ## Building an Ionic 3/Angular 4|5 Application with a GraphQL API 1410 | 1411 | In this tutorial we'll see how to build a CRUD Ionic 3 mobile application (or if you prefer an Angular 4+ web application) using the modern GraphQL-based API 1412 | 1413 | 20 Jan 2018 1414 | 1415 | [Read article](https://www.techiediaries.com/ionic-graphql/) 1416 | 1417 | ## 3+ Ways to Add Authentication to Ionic 3 (Angular 4|5) Applications 1418 | 1419 | In this article we'll look at the available options for adding authentication to your Ionic 3 application 1420 | 1421 | 20 Jan 2018 1422 | 1423 | [Read article](https://www.techiediaries.com/ionic-angular-auth/) 1424 | 1425 | ## QuickTip: Django and AngularJS Conflicting Interpolation Symbols 1426 | 1427 | In this quick-tip post we'll see how to change the conflicting symbols for template tags when using Django and AngularJS 1428 | 1429 | 20 Jan 2018 1430 | 1431 | [Read article](https://www.techiediaries.com/angularjs-django-template-tags/) 1432 | 1433 | ## Building Modern Web Apps with Python, Django Rest Framework and Angular 4|5 1434 | 1435 | In this tutorial we are going to learn how to get started building modern web applications with Python, Django and Django Rest Framework as the back-end stack and the new Google Framework, Angular 2+, to build JavaScript client side applications, as the front-end technology. We'll see how to integrate both frameworks in the development and the production environments and how to use the Angular HTTP module to make API calls or Ajax requests to our REST API back-end. 1436 | 1437 | 18 Dec 2017 1438 | 1439 | [Read article](https://www.techiediaries.com/django-angular-cli/) 1440 | 1441 | ## Building Server Side Rendered Apps with the Angular Universal Starter 1442 | 1443 | How to build server rendered apps with Angular Universal Starter 1444 | 1445 | 28 Jul 2017 1446 | 1447 | [Read article](https://www.techiediaries.com/angular-universal-starter/) 1448 | 1449 | ## How To Read QR Codes In Angular ? 1450 | 1451 | Reading QR Codes in Angular 4+ 1452 | 1453 | 07 Jun 2017 1454 | 1455 | [Read article](https://www.techiediaries.com/read-qrcodes-angular/) 1456 | 1457 | ## Create a QR Code Generator with Angular 4+ 1458 | 1459 | How To Generate QR Codes In Angular 4+ Applications 1460 | 1461 | 06 Jun 2017 1462 | 1463 | [Read article](https://www.techiediaries.com/generate-qrcodes-angular/) 1464 | --------------------------------------------------------------------------------