Videos uploaded by user “Fireship”
Sharing Data between Components in Angular
Fully documented lesson at https://angularfirebase.com/lessons/sharing-data-between-angular-components-four-methods/ In this episode, I am going to show you four different ways to share data between Angular components. Parent to Child the Input Decorator When you declare a variable with the Input decorator in the child component, it allows that variable to be received from a parent template. In this case, we define a message variable in the parent, then use square brackets to pass the data to the child. Now the child can display this data in its own template. Child to Parent via ViewChild ViewChild allows a one component to be injected into another, giving the parent access to its attributes and functions. One caveat, however, is that child won't be available until after the view has been initialized. This means we need to implement the AfterViewInit lifecycle hook to receive the data from the child. In the AfterViewInit function we can access the message variable defined in the child Child to Parent via Output and EventEmitter Another way to share data is to emit data from the child, which can be listed to by the parent. This approach is ideal when you want to share data changes that occur on things like button clicks, form entires, and other user events. In the child, we declare a messageEvent variable with the Output decorator and set it equal to a new event emitter. Then we create a function named sendMessage that calls emit on this event with the message we want to send. Lastly, we create a button to trigger this function. In the parent, we create a function to receive the message and set it equal to the message variable. The parent can now subscribe to this messageEvent that's outputted by the child component, then run the receive message function whenever this event occurs. Share data between any components When passing data between components that lack a direct connection, such as siblings, grandchildren, etc, you should you a shared service. When you have data that should aways been in sync, I find the RxJS `BehaviorSubject` very useful in this situation. The main benefit that a BehaviorSubject ensures that every component consuming the service receives the most recent data. In the service, we create a private BehaviorSubject that will hold the current value of the message. We define a currentMessage variable handle this data stream as an observable that will be used by the components. Lastly, we create function that calls next on the BehaviorSubject to change its value. The parent, child, and sibling components all receive the same treatment. We inject the DataService in the constructor, then subscribe to the currentMessage observable and set its value equal to the message variable. Now if we create a function in any one of these components that changes the value of the message. when this function is executed the new data it's automatically broadcast to all other components. That's it for data sharing. See you next time.
Views: 193424 Fireship
TypeScript - The Basics
TypeScript has forever altered the lives of JavaScript developers. Learn why TS is so awesome and the basic concepts required to be successful using it https://angularfirebase.com/typescript-the-basics/ Deep Dive https://github.com/basarat/typescript-book TypeScript Docs https://www.typescriptlang.org/
Views: 117804 Fireship
VS Code Top-Ten Pro Tips
Learn how to use Visual Studio Code like a pro with my top-ten strategies for developer productivity and happiness. https://angularfirebase.com/lessons/top-10-vscode-pro-tips/ - Get VS Code https://code.visualstudio.com/
Views: 596632 Fireship
Learn NgModule in Angular with Examples
Full lesson https://angularfirebase.com/lessons/a-simple-explanation-of-ngmodule/ In this episode, I show you how to refactor an Angular app into different modules for better organization and maintainability. Full NgModule FAQ https://angular.io/guide/ngmodule-faq
Views: 24693 Fireship
The Async Await Episode I Promised
The await is over! Learn how to make your JavaScript Promise code beautiful and concise with async-await https://github.com/codediodeio/async-await-pro-tips Jake Archibald's Talk: https://youtu.be/cCOL7MC4Pl0 Demos with Angular: https://www.youtube.com/channel/UCYFd7Qy93YP7gPERnxP545A
Views: 112408 Fireship
Model Relational Data in Firestore NoSQL
Learn how to model and structure data relationships with the Firestore NoSQL Database. We build simple one-to-many and many-to-many relationships by modeling a twitter-inspired app. https://angularfirebase.com/lessons/firestore-nosql-data-modeling-by-example - Firestore Structuring: https://firebase.google.com/docs/firestore/manage-data/structure-data - NoSQL Document DB - https://en.wikipedia.org/wiki/Document-oriented_database
Views: 79096 Fireship
Lazy-Loaded Images - Code This, Not That
Code this 💪, not that 💩. Learn how to use IntersectionObserver to lazy-load images efficiently in the browser without listening to the scroll event https://fireship.io/snippets/intersection-observer-lazy-load-images/ API https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API
Views: 17907 Fireship
JavaScript Pro Tips - Code This, NOT That
New Series! Code this 💪, not that 💩. Learn how to write solid modern JavaScript and avoid bad code from the olden days. https://angularfirebase.com - Source https://github.com/codediodeio/code-this-not-that-js
Views: 566799 Fireship
Top 10 Programming Languages in 90 Seconds
Top Ten Programming Languages 🔥 for 2019 based on your goals as a developer. https://medium.com/@jeffdelaney/top-ten-programming-languages-of-2019-a8dd5bc6f3bc Learn more at https://fireship.io
Views: 19922 Fireship
Ionic 4: Should you Build a Hybrid App?
Is Ionic 4 right for your mobile app compared to Flutter, React Native, or Native Script? Get my opinion in this video and explore the changes the latest version of the framework. https://itnext.io/should-you-use-ionic-4-fa04daebaffd - Ionic 4 Beta https://blog.ionicframework.com/announcing-ionic-4-beta/ - Flutter https://flutter.io/ - React Native https://facebook.github.io/react-native/
Views: 125559 Fireship
JavaScript Loops - Code This, Not That
Learn all about JavaScript loops 🤹 and how to write code that maximizes performance and readability, while avoiding the bad stuff 💩. https://fireship.io/snippets/javascript-loops-pro-tips/
Views: 60591 Fireship
Top 7 Ways to Debug Angular 4 Apps
Learn seven effective strategies to debug Angular 4.x applications, including RxJS debugging methods. Checkout the full lesson code: https://angularfirebase.com/lessons/methods-for-debugging-an-angular-application/ Get the Augury plugin: https://chrome.google.com/webstore/detail/augury/elgalmkoelokbchhkhacckoklkejnhcd
Views: 34569 Fireship
RxJS Top Ten - Code This, Not That
Another episode of "code this 💪, not that 💩" looking at ten important concepts in RxJS and how to avoid common anti-patterns. https://fireship.io - Source Code https://github.com/fireship-io/175-code-this-not-that-rxjs - ReactiveX http://reactivex.io/ - print method code https://gist.github.com/codediodeio/ed900f4cf5752b54160a82bc3ab2d9ea #RxJS #JavaScript
Views: 28885 Fireship
Learn @ngrx/entity and Feature Modules
Learn how to use the new ngrx entity package to build CRUD with less code. In this video, I show you how to create a feature module with ngrx, then use entity adapter methods in the reducer. https://angularfirebase.com/lessons/ngrx-entity-feature-modules-tutorial/ Medium: https://medium.com/ngrx/introducing-ngrx-entity-598176456e15 Docs: https://github.com/ngrx/platform/tree/master/docs/entity
Views: 24904 Fireship
10 Predictions about 2019 for Developers
Ten predictions about 2019 from the mind of a JavaScript developer. Learn about trends in web development, native apps, social media, and more. https://medium.com/@jeffdelaney/predictions-for-2019-from-the-mind-of-a-javascript-developer-f595992ec32b
Views: 164130 Fireship
Cloud Run QuickStart - Docker to Serverless
Use the brand new Cloud Run service to turn any Docker 🐋 image into a serverless microservice on Google Cloud Platform. In this demo, we dockerize and deploy a server-rendered Nuxt/Vue app to Firebase Hosting https://fireship.io/lessons/firebase-microservices-with-cloud-run/ Cloud Run https://cloud.google.com/run/ Nuxt https://nuxtjs.org/ Firebase Microservices https://firebase.google.com/docs/hosting/cloud-run #cloudrun #docker #serverless
Views: 19600 Fireship
Top 7 RxJS Concepts for Angular Developers
Learn 7 essential tips when using RxJS with Angular and Firebase, each with its own example. Full lesson: https://angularfirebase.com/lessons/top-7-rxjs-patterns-for-angular-development/ JavaScript Evangelist BehaviorSubject: https://youtu.be/IpM3oUPuGME Learn about RxJS at https://learnrxjs.io
Views: 69601 Fireship
Angular Elements Quick Start
Take an early look at Angular Elements by building a component that can be embedded into any web app as a custom element https://angularfirebase.com/lessons/angular-elements-quick-start-guide/ I'll randomly give out some swag on Friday. Just leave a comment :) - Docs (Angular 6) - https://next.angular.io/guide/elements - Rob Wormald's Talk https://youtu.be/Z1gLFPLVJjY
Views: 47162 Fireship
How to NOT get a 30K Firebase Bill
Learn how to manage costs in Firebase with both clientside and serverside optimizations. https://angularfirebase.com/lessons/managing-firebase-costs/ Source Article https://hackernoon.com/how-we-spent-30k-usd-in-firebase-in-less-than-72-hours-307490bd24d Firebase Pricing https://firebase.google.com/pricing/
Views: 49417 Fireship
Capacitor - Five Apps in Five Minutes
Use Capacitor to build an Angular CLI app for iOS, Android, Windows, MacOS, and the web in exactly 5 minutes https://angularfirebase.com/lessons/capacitor-five-apps-in-five-minutes/ - Let's Chat https://goo.gl/qF8Q5r - Ionic course https://projects.angularfirebase.com/p/ionic-native-with-firebase - Capacitor https://capacitor.ionicframework.com/docs/
Views: 45595 Fireship
7 Amazing Developer Tools that you're not using yet
Discover seven amazing 🤯 tools for app developers that you have not heard of yet, but should probably be using. None of the selections are sponsored and are tools that I use in my daily work. https://fireship.io - BundlePhobia https://bundlephobia.com/ - CloudCraft https://cloudcraft.co/ - Figma https://www.figma.com - Fontflipper https://fontflipper.com/ - Visbug https://github.com/GoogleChromeLabs/ProjectVisBug - Insomnia https://insomnia.rest/ - Flare https://www.2dimensions.com/about-flare
Views: 477208 Fireship
Progressive Web Apps with Angular
Get a 100 PWA score on Lighthouse with Angular. In this episode, I will teach you how to configure your app to be 100% compliant with the progressive web app checklist provided by Google, making your app installable on compatible devices. Full Lesson Code: https://angularfirebase.com/lessons/installable-angular-progressive-web-app/ Demo App: https://firestarter-96e46.firebaseapp.com/ Lighthouse: https://developers.google.com/web/tools/lighthouse/ SW-Precache: https://www.npmjs.com/package/sw-precache-webpack-plugin
Views: 65989 Fireship
Angular 4 Development and Production Environments with Firebase
Welcome to Angular Firebase. Today, I'm going to show you how to create separate backend environments for development and production with Angular 4. Maintaining separate environments allows you to build and test new features without screwing up data from your live production app. Step 1 - Create two Firebase Projects Before jumping into the code, you will need two separate Firebase projects one for development and one for production. Step 2 Create the Environment Files I just cloned the FireStarter App from github and the first step is to create the environment files. If you created a new app with the Angular CLI, these files will be here by default. Also, make sure to add these files to your gitignore as they will hold sensitive credentials for your app. Step 3 paste in the firebase config using the unique API credentials from each of your projects. Step 4 - Bootstrap the environment in the app module Now we can import the environment anywhere in our app. In this case, we want to bootstrap firebase config in the app module. These are the necessary lines to wire up the environments with Firebase. Step 5 - Serve or Build the App With that done, its possible to serve our app locally using either environment. It will serve in development by default with ng serve or serve in product with the --prod flag ng serve --prod When deploying the app, make sure to always include the --prod flag. ng build --prod Thanks for watching. I'll see you on the other side.
Views: 15522 Fireship
Angular Router Guards for Firebase Users
UPDATE: Get the latest version here https://angularfirebase.com/lessons/google-user-auth-with-firestore-custom-data/ Router Guards are used in Angular to prevent unauthorized users from navigating anywhere they want in your app. At this point our app has a working Firebase authentication system, but any visitor can access routes intended for only logged in users. Guards handle this problem by implementing the CanActivate interface, which tells Angular whether or not to activate a route. In this example, we will protect pages for unauthenticated users and redirect them to a signin page. Step 1 - Generate the Guard We use the CLI in Angular 4 to generate a default guard. Guards use the injectable decorator, so they need to be registered as a provider just like any other service in the app module. Step 2 - Update the Auth Service Our users are authenticating via Firebase and the AngularFire2 package. In the service we are subscribing the FirebaseAuthState, then using a getter to see if the auth object is null. Checkout the OAuth tutorial for more details on this code. Step 3 - Implement the Guard Logic Router guards always return a boolean type or boolean observable. The logic here is simple, if the FirebaseAuthState is defined, we activate the route. Otherwise, we return false and navigate to to the login page. Now that the guard is complete, we just need to apply it to specific routes in the routing module. That's it for router guards, I'll see you next time.
Views: 10339 Fireship
Angular HTTP Client Quick Start Tutorial
Start making restful API requests from Angular 4.3+ with the new HTTP client. In this lesson, I show you how to make GET and POST requests, set URL params, headers, handle errors, and more. https://angularfirebase.com/lessons/http-with-angular-quick-start/ StackBlitz Demo: https://stackblitz.com/edit/http-basics Angular HTTP: https://angular.io/guide/http JSON Placeholder: https://jsonplaceholder.typicode.com/ Swagger Codegen: https://swagger.io/
Views: 71930 Fireship
The Magic of TypeScript Decorators
Practical examples of TypeScript Decorators 🍨. Learn how to use decorators to build an API similar to React Hooks in Angular https://fireship.io/lessons/ts-decorators-by-example/ Docs https://www.typescriptlang.org/docs/handbook/decorators.html
Views: 22689 Fireship
Angular ngrx Redux Quick Start Tutorial
Learn the basic concepts and design patterns behind Redux and NgRx store. I will show you how to build a basic Redux app with Angular4 from scratch. Full Lesson: https://angularfirebase.com/lessons/angular-ngrx-redux-starter-guide/ Demo App: https://github.com/codediodeio/ngrx-fire NgRx: https://github.com/ngrx
Views: 72211 Fireship
Firestore Increment - Counters that Scale
Learn about the new Firestore "increment" field-value that can update a counter on the server atomically, with dramatically simplified code https://fireship.io/snippets/firestore-increment-tips/ - Increment blog post https://firebase.googleblog.com/2019/03/increment-server-side-cloud-firestore.html - Database Transactions https://firebase.google.com/docs/firestore/manage-data/transactions
Views: 7655 Fireship
Object Oriented vs Functional Programming with TypeScript
Learn how object-oriented 🎁 and functional ❄️ programming are awesome in their own ways. Also, get infallible answers answers to questions like "composition over inheritance?", "GIF over JIF?", "Is a hotdog a sandwich?" and more! Special Thanks to Patrick Mullot - you rock! Functional Cake Recipe https://probablydance.com/2016/02/27/functional-programming-is-not-popular-because-it-is-weird/ Full Article: https://angularfirebase.com/lessons/object-oriented-programming-with-typescript/ TS Mixins https://www.typescriptlang.org/docs/handbook/mixins.html
Views: 69265 Fireship
Svelte 3 Reaction & QuickStart Tutorial
First, we learn some basic concepts in Svelte 3 and how to build reactive UI components with JavaScript. Then we build a fullstack realtime todo list with RxFire and Svelte. https://fireship.io/lessons/svelte-v3-overview-firebase/ - Svelte https://svelte.dev/ - Rich Harris - Rethinking reactivity https://youtu.be/AdNJ3fydeao - RxFire https://www.npmjs.com/package/rxfire #svelte #javascript
Views: 37664 Fireship
Angular Router - The Basics and Beyond
Learn everything you need to know to use the Angular v6 router effectively. We start with the absolute basics, then move on to advanced concepts related to guards and resolvers https://angularfirebase.com/lessons/basics-angular-router/ - Router Docs https://angular.io/guide/router - Lazy Loading Video https://youtu.be/8tBQI5grhbE
Views: 28903 Fireship
RxJS Quick Start with Practical Examples
Learn everything you wanted to know about RxJS - Reactive Extensions for JavaScript in 15 minutes. In this lesson, I cover about 25 different examples related to RxJS. Full Code and Lesson: https://angularfirebase.com/lessons/rxjs-quickstart-with-20-examples/ Useful Resources RxMarbles: http://rxmarbles.com/ LearnRxJs: https://www.learnrxjs.io/ Official Docs: http://reactivex.io/documentation
Views: 53285 Fireship
How to Deploy an Angular App to Firebase Hosting
https://angularfirebase.com/lessons/deploying-an-angular-app-to-firebase/ In this episode, we're going to deploy an Angular 4 app to Firebase hosting. After some initial configuration, you can deploy your app to firebase in a matter of seconds. The best part is that its free for low volume usage and you'll be prepared to scale up as your app grows. Step 1 - Compile your App Running the ng build command will compile and minify your code in a single package in the dist/ folder. You could drop the contents of this directory into virtually any static website hosting platform or even an S3 bucket and you’re site would be ready to serve traffic. Step 2 - Install Firebase Tools Firebase has a nice command line package for deployment. Install it with NPM, then log into your firebase account. Step 3 - Initialize your Project Make sure you are in the top level directory of your angular app, then run firebase init. This will take you through a one-time configuration for your app. For the most part, you can stick with the default settings, except in the follow cases: Choose hosting on the first question. Change public folder to dist when asked (it defaults to public). Configure as single page app? Yes If firebase asks to overwrite your index.html file, respond with NO. Step 4 - Deploy Now your app should be ready to deploy. Run the firebase deploy command, then check your project URL to make sure everything looks good. That's all for firebase deployment, see you next time.
Views: 34346 Fireship
Lazy Loading Components in Angular 4
Full Lesson https://angularfirebase.com/lessons/how-to-lazy-load-components-in-angular-4-in-three-steps/ Learn how to load components asynchronously with Angular Lazy Loading. Get the source code on github https://github.com/codediodeio/lazy-loading-angular
Views: 65018 Fireship
Flutter for the JS Developer
Flutter/Dart basics for the JavaScript web developer. Learn the similarities and differences between Dart and JS side-by-side. Compare Flutter Widgets to React Native components. https://fireship.io/lessons/flutter-for-js-developers/ - Flutter https://flutter.io - React Native https://facebook.github.io/react-native/
Views: 82810 Fireship
NGXS - Angular State Management
Learn how use an exciting new state management library for Angular. In this episode, we get started with NGXS and compare it to NgRx. https://angularfirebase.com/lessons/ngxs-quick-start-angular-state-management/ - NGXS https://ngxs.gitbook.io/ngxs
Views: 29579 Fireship
Cypress End-to-End Testing
Learn how to perform amazing end-to-end testing for Angular Firebase apps using Cypress.io. You'll never write e2e tests in Angular 6 the same again https://angularfirebase.com/lessons/cypress-angular-testing-end-to-end/ - Why Cypress https://docs.cypress.io/api/introduction/api.html
Views: 26362 Fireship
Native Desktop Apps with Angular and Electron
Build native desktop apps with Angular 4 and Electron 1.7. In this lesson I create a simple timer app, then package it for Windows, MacOS, and Linux. Full Lesson at https://angularfirebase.com/lessons/desktop-apps-with-electron-and-angular/ Source Code: https://github.com/AngularFirebase/angular-electron Electron: https://electron.atom.io/ Angular: https://angular.io
Views: 110685 Fireship
Cloud Scheduler - Time Triggers for Cloud Functions
Let's build a robo-caller 🤖 ☎️. Learn how to use the new GCP Cloud Scheduler to trigger Firebase Cloud Functions at specific times or intervals. https://angularfirebase.com/lessons/cloud-scheduler-for-firebase-functions/ - Cloud Scheduler https://cloud.google.com/scheduler/ - Pubsub Functions https://firebase.google.com/docs/functions/pubsub-events
Views: 12544 Fireship
Flutter State Management - The Grand Tour
Take a tour of ten awesome state management techniques in Flutter. Learn how to control the flow of data when building complex large-scale mobile apps with RxDart, BLoC, and more https://fireship.io/lessons/flutter-state-management-guide/ 1. StatefulWidget 2. StatefulBuilder 3. InheritedWidget 4. RxDart + BehaviorSubject 5. BLoC 6. Redux 7. Mobx 8. Scoped Model 9. Flutter Hooks 10. Firebase Flutter State Mgmt Guide https://flutter.dev/docs/development/data-and-backend/state-mgmt/intro Bloc https://pub.dartlang.org/packages/flutter_bloc RxDart https://pub.dartlang.org/packages/rxdart
Views: 22914 Fireship
Custom Ionic Splash + Animation
Learn how to customize your app icon and splash page in Ionic, then add an animation to it. Grab the source code here https://angularfirebase.com/lessons/generate-a-custom-spash-screen-and-icons-in-ionic/ Ionic 3 - https://ionicframework.com/ SpinKit - http://tobiasahlin.com/spinkit/
Views: 79165 Fireship
Angular CLI - The Basics
Master the basics of the Angular CLI. In this lesson, we cover the most powerful features of the new Angular CLI v6.0 https://angularfirebase.com/lessons/basics-angular-cli/ - CLI Docs https://github.com/angular/angular-cli
Views: 27747 Fireship
Angular Console
Learn how to use the Angular Console to improve productivity with the CLI and easily manage 3rd party schematics. https://angularfirebase.com/lessons/angular-console-quick-start-guide/ - Angular Console: https://angularconsole.com/ - Angular CLI Basics Video: https://youtu.be/IZEolKjcjks
Views: 18034 Fireship
Firestore Security Rules - How to Hack a Firebase App
Learn how to hack a Firebase app, then configure solid Firestore Database security rules to ensure data integrity. https://angularfirebase.com/lessons/firestore-security-rules-guide/ - Rules Reference: https://firebase.google.com/docs/firestore/reference/security/
Views: 29868 Fireship
TensorFlow.js Quick Start
Get started with TensorFlow.js by building a digit recognizer from scratch in this quick start tutorial https://angularfirebase.com/lessons/tensorflow-js-quick-start/ TF.js docs - https://js.tensorflow.org Machine Learning Crash Course - https://developers.google.com/machine-learning/crash-course/ Kaggle - https://www.kaggle.com/jeffd23 MNIST - https://ml4a.github.io/demos/confusion_mnist/
Views: 98224 Fireship
Ionic 4 - Routing and Navigation Guide
Learn how to use the Angular Router in Ionic 4 to handle navigation in your mobile app https://angularfirebase.com/lessons/ionic-4-routing-and-navigation-guide/ - Ionic 4 Migration https://beta.ionicframework.com/docs/building/migration#navigation - Angular Router https://angular.io/api/router
Views: 42933 Fireship
Reactive Forms  - The Basics
Master the basics of Angular 6 reactive forms. In this episode, we build out form examples that solve common challenges like nesting, validation, persistence, and more. https://angularfirebase.com/lessons/basics-reactive-forms-in-angular/ - Reactive Forms Docs https://angular.io/guide/reactive-forms - Angular CLI Basics https://angularfirebase.com/lessons/basics-angular-cli/
Views: 58805 Fireship
Angular Testing Quick Start
Get started testing Angular 5 with Jasmine and Karma. This video covers basic testing component TDD concepts as well as 3rd party services like Firebase. https://angularfirebase.com/lessons/angular-testing-guide-including-firebase/ Jasmine: https://jasmine.github.io/ Testing Docs: https://angular.io/guide/testing Great Article: https://medium.com/javascript-scene/tdd-the-rite-way-53c9b46f45e3
Views: 38023 Fireship
Firestore with AngularFire5 Quick Start Tutorial
Get up and running with Firestore and AngularFire5. Learn how to use the Firebase Firestore database to query, update, and manage offline data. https://angularfirebase.com/lessons/firestore-with-angularfire-basics/ Demo: https://firestarter-96e46.firebaseapp.com/ Firestore: https://firebase.googleblog.com/2017/10/introducing-cloud-firestore.html AngularFire: https://github.com/angular/angularfire2 More Lessons: https://angularfirebase.com
Views: 58453 Fireship
Firestore Data Modeling - Five Cool Techniques
Five useful data modeling techniques in Cloud Firestore 🔥 that you may not know about. Checkout the full course here 👉https://fireship.io/courses/firestore-data-modeling/ - 25% off PRO Membership use code: lORhwXd2 - Cloud Firestore https://firebase.google.com/docs/firestore/
Views: 20511 Fireship