Angularistic
Angularistic
  • 20
  • 335 380
Create an Image Slider from Scratch in Angular
In this video we'll create an image slider from scratch using angular.
_________________________________________________
Commands used
To generate components : ng g c touch-slider --standalone
NPM Commands :
1) npm i hammerjs
2) npm i --save-dev @types/hammerjs
_________________________________________________
Hope you like this video.
If you think there's a better way to improve this code, please let us know in the comments.
If you like this video please subscribe to Angularistic, like and share this video.
มุมมอง: 6 987

วีดีโอ

Create Reusable Chip Input Component in Angular
มุมมอง 4.1Kปีที่แล้ว
In this video we'll create a reusable chip input component from scratch using angular. This example, discusses about ControlValueAccessor in angular. Control Value Accessor interface acts as a bridge between the Angular forms API and a native element in the DOM. The main advantage of doing that is that we get all the default validations you’d get with any element, in order to track the validity...
Create Reusable Feedback Component in Angular
มุมมอง 1.4Kปีที่แล้ว
In this video we'll create a reusable feedback component from scratch using angular. This example, discusses about ControlValueAccessor in angular. Control Value Accessor interface acts as a bridge between the Angular forms API and a native element in the DOM. The main advantage of doing that is that we get all the default validations you’d get with any element, in order to track the validity a...
Adding Responsive Toolbar | Part 3 | Responsive Sidenav
มุมมอง 24Kปีที่แล้ว
In this video we'll add a toolbar to the responsive side navigation bar which we created in the previous video. Project helper: github.com/Angular-istic/Project-helper/blob/main/sidenav.md#sidenav-with-toolbar Assets: github.com/Angular-istic/Project-helper/tree/main/assets/sidenav Commands used To generate components : ng g c header Angular CDK: npm i @angular/cdk If you think there's a better...
Adding Multi Level Menu to Sidenav | Part 2 | Responsive Sidenav
มุมมอง 54Kปีที่แล้ว
In this video we'll add a multi level submenu to the responsive side navigation bar which we created in the previous video. Project helper: github.com/Angular-istic/Project-helper/blob/main/sidenav.md Commands used To generate components : ng g c sublevel-menu inline-template inline-style flat true ng g c coupen-list module coupens ng g c product-level-three-one module products ng g c product-l...
Animated Responsive Sidenav in Angular | Part 1 | Responsive Sidenav
มุมมอง 153Kปีที่แล้ว
In this video we'll create an animated responsive side navigation bar from scratch using angular. Project helper: github.com/Angular-istic/Project-helper/blob/main/sidenav.md Commands used To generate components : ng g c body skip-tests true ng g c sidenav skip-tests true ng g c dashboard skip-tests true ng g c products skip-tests true ng g c statistics skip-tests true ng g c coupens skip-tests...
Create an Image Gallery with Lightbox from Scratch in Angular
มุมมอง 10Kปีที่แล้ว
In this video we'll create a responsive image gallery with lightbox from scratch using angular. Project helper: github.com/Angular-istic/Project-helper/blob/main/gallery-lightbox.md Images: github.com/Angular-istic/Project-helper/blob/main/gallery-lightbox.md#gallery-images Commands used To generate components : ng g c gallery-lightbox skip-tests true Hope you like this video. If you think ther...
Build a Carousel from Scratch in Angular
มุมมอง 33Kปีที่แล้ว
In this video we'll create an image slider/carousel from scratch using angular. Project helper: github.com/Angular-istic/Project-helper/blob/main/carousel.md Used Images: github.com/Angular-istic/Project-helper/blob/main/carousel.md#carousel-images Commands used To generate module : ng g m carousel To generate components : ng g c carousel module carousel skip-tests true export true flat true tr...
Create a Stopwatch using Angular
มุมมอง 3.3Kปีที่แล้ว
In this video we'll create a stopwatch using angular. Project helper: github.com/Angular-istic/Project-helper/blob/main/stopwatch.md Hope you like this video. If you think there's a better way to improve this code, please let us know in the comments. If you like this video please subscribe to Angularistic, like and share this video.
Create Reusable Timeline Component in Angular
มุมมอง 6Kปีที่แล้ว
In this video we'll create a reusable timeline component that can be used as an order tracking component in angular e-commerce applications. This will be a reusable component so that we can use this timeline component in any part of the application. Hope you like this video. If you think there's a better way to improve this code, please let us know in the comments. If you like this video please...
Reusable accordion from scratch in Angular
มุมมอง 4Kปีที่แล้ว
In this video we'll create a reusable accordion from scratch in angular. This angular accordion example discuss about content projection and angular animation. This reusable angular 8 accordion example almost similar to angular material expansion panel but with our own custom styling and animation. Hope you like this video. Tell us in the comment if there is a better way to improve this code. I...
Reusable Flip Card in Angular.
มุมมอง 2.8Kปีที่แล้ว
In this video we'll create a reusable flip card in Angular. Hope you like this video. Tell us in the comment if there is a better way to improve this code. Source code : github.com/Angular-istic/Flip-card If you like this video please subscribe to Angularistic, like and share this video.
Information Slider from Scratch in Angular
มุมมอง 732ปีที่แล้ว
In this video we'll create a reusable information slider component using the CDK stepper in Angular. This information slider component can also be used as a stepper component or slideshow component with some minor changes. The app is generated with Angular 9 (Angular CLI version 9.0.3.). Project helper: github.com/Angular-istic/Project-helper/blob/main/info-slider.md Hope you like this video. I...
Create Analog Clock Using Angular
มุมมอง 1.3Kปีที่แล้ว
This video demonstrates how to create an analog clock using angular from scratch. At some point you might want to show a working analog clock in your website for the users to see. This angular tutorial shows how to create an analog clock from scratch without using any 3rd party library. This video also explains neumorphism design, css 3, html 5 and typescript (JavaScript). This code can be used...
Create a digital clock in angular
มุมมอง 2.4Kปีที่แล้ว
This video demonstrates how to create a digital clock in angular 8 from scratch. In real word angular application you might want to add a digital clock somewhere on your page for the users to see. This angular tutorial shows how to create a digital clock from scratch without using any 3rd party library. This code can be used in angular 2 and above applications. Hope you like this video. If you ...
Create Animated Incremental Notification using Angular
มุมมอง 8692 ปีที่แล้ว
Create Animated Incremental Notification using Angular
Skeleton Screen Loader in Angular
มุมมอง 18K4 ปีที่แล้ว
Skeleton Screen Loader in Angular
Profile card with neumorphism effect using HTML CSS
มุมมอง 1.2K4 ปีที่แล้ว
Profile card with neumorphism effect using HTML CSS
Create Analog Clock Using Angular
มุมมอง 3.3K4 ปีที่แล้ว
Create Analog Clock Using Angular
Create a digital clock in angular
มุมมอง 6K4 ปีที่แล้ว
Create a digital clock in angular

ความคิดเห็น

  • @anitarolando2531
    @anitarolando2531 4 วันที่ผ่านมา

    Thank you for this tutorial!

  • @anitarolando2531
    @anitarolando2531 6 วันที่ผ่านมา

    Awesome tutorial, thank you!

  • @HarishankarJoshi-uq1pf
    @HarishankarJoshi-uq1pf 2 หลายเดือนก่อน

    source code please 🙏🙏🙏

  • @ViniDev21
    @ViniDev21 2 หลายเดือนก่อน

    Good morning! Are you using 'standalone' in this project?

  • @Bastardovl
    @Bastardovl 2 หลายเดือนก่อน

    First of all, thank you for the video. I'm using angular 17 and i had to import CommonModule at gallery-lightbox.component.ts to display the images

  • @AAA1649
    @AAA1649 2 หลายเดือนก่อน

    thank you, it very cool for me, i like slide animation

  • @Animesh878
    @Animesh878 3 หลายเดือนก่อน

    where did u get screen width

  • @jayeshkshatriya5715
    @jayeshkshatriya5715 3 หลายเดือนก่อน

    please provide code

  • @krypton2072
    @krypton2072 3 หลายเดือนก่อน

    nice video thnx

  • @CarolVianaxx
    @CarolVianaxx 3 หลายเดือนก่อน

    thank you!

  • @chicagoboy279
    @chicagoboy279 3 หลายเดือนก่อน

    is it touch?

  • @elliotalderson1604
    @elliotalderson1604 3 หลายเดือนก่อน

    left the full code please

  • @Klea-t7g
    @Klea-t7g 4 หลายเดือนก่อน

    @Angularistic A very good tutorial. Thank you. What is the problem, when I click on a button that the dropdown contains inside to send me to a page, the dropdown closes and does not keep marked where I am.

  • @gatchangstephen
    @gatchangstephen 4 หลายเดือนก่อน

    I did it in angular 18; thank you for the excellent content!

    • @bhaskardixit1564
      @bhaskardixit1564 3 หลายเดือนก่อน

      please share source code

  • @SisterNiveditaModelSchoo-vp1ik
    @SisterNiveditaModelSchoo-vp1ik 4 หลายเดือนก่อน

    Very good 👍👍 pls make videos like this... love from this noob programmer

  • @Zewalk
    @Zewalk 4 หลายเดือนก่อน

    Amazing Tutorial! Thanks!😃

  • @H4LIL_G
    @H4LIL_G 5 หลายเดือนก่อน

    thats great :)

  • @koksiangkoh3401
    @koksiangkoh3401 5 หลายเดือนก่อน

    got error as below: ERROR DOMException: Failed to execute 'setAttribute' on 'Element': ']' is not a valid attribute name. how to solve it ? thank you

  • @othmaneouacrime
    @othmaneouacrime 5 หลายเดือนก่อน

    thnk you so muchh

  • @naiomi5532
    @naiomi5532 6 หลายเดือนก่อน

    hello i wanna ask it'is possible to update to angular 17 ?

  • @AbdulSamad-rt2bj
    @AbdulSamad-rt2bj 6 หลายเดือนก่อน

    how to get other icons name

  • @nurte4
    @nurte4 6 หลายเดือนก่อน

    hi, can u share github repo

  • @gabrielsosa163
    @gabrielsosa163 6 หลายเดือนก่อน

    Excelente video muy bien echo , pero como cambio las imagenes a las que yo necesito realmente

  • @EmmyGames27
    @EmmyGames27 6 หลายเดือนก่อน

    me pueden regalar el codigo

  • @antoneetozmasua4019
    @antoneetozmasua4019 7 หลายเดือนก่อน

    great video there 👌

  • @mipslp6028
    @mipslp6028 7 หลายเดือนก่อน

    Which angular version are you using? I encountered problems with angular version 17.2.2. The (click) property doesn't work. It doesn't throw errors, the clicks just won't register. (mousedown) and (mouseup) don't work either. Additionally as soon as setInterval or setTimeout is used in a recursive loop or any loop at all, the website won't load, as if it was an while(true) loop...

    • @mipslp6028
      @mipslp6028 6 หลายเดือนก่อน

      I fixed it by re-programming the image carousel from scratch following your design choices in react

  • @pedrollerenas2352
    @pedrollerenas2352 7 หลายเดือนก่อน

    Another way of implementing the slider: public slide(sign: number): void { this.selectedIndex = (this.images.length + this.selectedIndex + sign) % this.images.length; } and calling slide(-1) or slide(1) accordingly.

  • @benmakhloufaya5037
    @benmakhloufaya5037 7 หลายเดือนก่อน

    Can we use this with CSS? Because I use CSS, not SCSS

  • @sureshthalluru2012
    @sureshthalluru2012 7 หลายเดือนก่อน

    Hey Angularistic team, Can you tell me, which versions of Angularjs, Nodejs, typescript, rxjs is used here in this application. It will be helpful for us. Thanks. Suresh

  • @Ivan_lj
    @Ivan_lj 8 หลายเดือนก่อน

    Does it works on safari ios?

  • @monsieurrodriguez9687
    @monsieurrodriguez9687 8 หลายเดือนก่อน

    you got in spanish a guy that simply copy and paste his code without any explanation and you without a single word but a step-by-step video set the thing much more clear

  • @unhandledexception1948
    @unhandledexception1948 8 หลายเดือนก่อน

    thanks... is the source code on github? the link below seems just a readme file

  • @yuresilva4922
    @yuresilva4922 8 หลายเดือนก่อน

    Simply a hero

  • @IsaacAIm123
    @IsaacAIm123 8 หลายเดือนก่อน

    great work! but I tried using CSS styling to style the panLeft and panRight (&.next and &.prev) is not working

  • @oleksandrshcherbyna8758
    @oleksandrshcherbyna8758 8 หลายเดือนก่อน

    Nice one

  • @ronmoki1
    @ronmoki1 9 หลายเดือนก่อน

    AMAZING

  • @HungNguyen-dh2un
    @HungNguyen-dh2un 9 หลายเดือนก่อน

    sir, can u share your code? pls

  • @kirklimbu
    @kirklimbu 9 หลายเดือนก่อน

    thanks for the amazing tutorials and resources. We are growing <3

  • @jonathannto
    @jonathannto 9 หลายเดือนก่อน

    Thanks, bro! I learned a lot from this amazing tutorial

  • @kajalgadiya
    @kajalgadiya 9 หลายเดือนก่อน

    Which angular version does this support? I am trying with 16 but getting errors

  • @MananAndrabi-dw6pg
    @MananAndrabi-dw6pg 9 หลายเดือนก่อน

    touchs are not working it did samer,,,plz guid a bit

    • @jackoschoonderwoerd
      @jackoschoonderwoerd 9 หลายเดือนก่อน

      export const appConfig: ApplicationConfig = { providers: [ [importProvidersFrom(HammerModule)] ] };

  • @skillv1ew
    @skillv1ew 10 หลายเดือนก่อน

    god bless u brother

  • @jerrigyaneswararao756
    @jerrigyaneswararao756 10 หลายเดือนก่อน

    @angularistic could you please share the part 3 code with us 😊

  • @jerrigyaneswararao756
    @jerrigyaneswararao756 10 หลายเดือนก่อน

    Could you please share with us the part 3 code,😊

  • @nadakitsch
    @nadakitsch 10 หลายเดือนก่อน

    Very useful! Thank you!

  • @srafa16
    @srafa16 10 หลายเดือนก่อน

    The icons don't appear can someone help me?

  • @opeyemiomolade961
    @opeyemiomolade961 10 หลายเดือนก่อน

    github repo ?

  • @Anurag-l1d
    @Anurag-l1d 10 หลายเดือนก่อน

    Error: src/app/app.component.html:1:49 - error TS2345: Argument of type 'Event' is not assignable to parameter of type 'SideNavToggle'. Type 'Event' is missing the following properties from type 'SideNavToggle': screenWidth, collapsed 1 <app-sidebar (onToggleSideNav)="onToggleSideNav($event)"></app-sidebar> ~~~~~~ src/app/app.component.ts:12:16 12 templateUrl: './app.component.html', ~~~~~~~~~~~~~~~~~~~~~~ Error occurs in the template of component AppComponent. I got this issue can anyone help me for troubleshoot this problem in my pc

  • @virokalu
    @virokalu 10 หลายเดือนก่อน

    Guys, Use Angular version 16 or lower to work with this tutorial smoothly.

  • @edilsonfilho5721
    @edilsonfilho5721 10 หลายเดือนก่อน

    When I do click on button "A" to expand, the button reduce own size for a moment, then back to the normal size