Our school project team is venturing into the world of Angular and TypeScript, but we all admit to being newbies in this area.
I've mainly focused on the design aspect of our project and left the coding to my teammates. However, I recently completed my part and did a git pull. That's when I stumbled upon some code written by one of my friends:
ngOnInit() {
$(document).ready(function() {
$(".dropdown-trigger").dropdown();
$(".hamburger-nav").on("click", function() {
setHamburgerMenu();
$(".menu").animate({
height: 'toggle'
});
});
$('.modal').modal({
inDuration: 400,
outDuration: 400,
preventScrolling: false
});
}); //document ready function
}
Although we are using Materialize CSS for styling, I can't shake off this feeling of unease about seeing jQuery code in an Angular 2 application. It just seems strange to have $.ready following an Angular NgOnInit. Moreover, shouldn't Angular 2 provide event handling functionality that eliminates the need for $.on('click', ...)?
So, is this piece of code correct or incorrect? Also, when it comes to TypeScript, is it considered good practice (or even acceptable) to mix jQuery in a TypeScript file like this?
I apologize if these questions seem basic. As someone who is brand new to Angular and has only completed an EdX course on the subject, I've been scouring the internet unsuccessfully for answers. I'm simply eager to learn more!