Angular PrimeNG Media Complete Reference
Last Updated :
05 Oct, 2023
Angular PrimeNG Media facilitates the various components, such as Carousel, Galleria, & Image components, that help to design & display a better user interface for the website. This also helps to enhance the overall user experience, along with engaging the user to the site.
The complete list of Media Components is listed below with their brief description:
Carousel Component
The Carousel is a content slider component where an array of data is shown sequentially either manually or automatically.
Angular PrimeNG Basic Carousel is used to render the basic carousel. The carousel is a slider-type component that offers high customization. |
We can make the carousel vertical by setting the orientation to vertical. The default layout of the Carousel is horizontal. |
The number of items per page is defined using the numVisible property whereas the number of items to scroll is defined with the numScroll property. |
Angular PrimeNG Carousel Responsive for responsive design based on screen size, numVisible, and numScroll can be defined using the responsiveOptions property |
We can make custom properties of the Carousel using a header and footer. |
Carousel provides two types of orientation i.e. horizontal and vertical which can be set using property orientation. |
To scroll the Carousel automatically, we can define time in property autoplayInterval. Time is in milliseconds. |
Angular PrimeNG Carousel Properties value, page, style, styleClass, circular, etc. |
The onPage(event) is the callback to invoke after scroll. |
The Carousel Templates are used to place the different components in the Carousel component. |
The Carousel in Angular PrimeNG provides great customization with different styling options that can be used to create dynamic carousels, along with enhancing the overall user experience. |
Galleria Component
Angular PrimeNG Galleria is an advanced content gallery component. It is used for displaying images in an attractive manner. Let us learn about this using some examples.
The Galleria in Angular PrimeNG is an advanced content gallery component & can be used for displaying images in an attractive manner. |
The Galleria Programmatic can be utilized to control programmatically using the activeIndex property. |
The Galleria Indicator allows users to navigate quickly through the Galleria items. |
Thumbnails in the Galleria component can be positioned at the top, bottom, left, or right and are enabled by default. |
Navigators are used for navigating to the other items of the Galleria component. |
The Responsive is used to set the number of images visible in the thumbnails based on the screen size. |
When the Galleria component is in fullscreen mode, a blackish mask covers the whole page, and the content is displayed over that mask. |
In autoplay mode, the active item of the galleria component changes automatically after a definer time. |
The caption of an item consists of the tile and the description. |
Angular PrimeNG Galleria is an advanced content gallery component. It is used for displaying images in an attractive manner. Let us learn about this using some examples. |
Image Component
The Image component is used to display images and PrimeNG provides many transforming features and options so that we can display images according to our choice and design.
The Image component is used to show a single image to the user with the preview and basic transformations. |
To enable the image property we have to set the preview property of the Image component to true. |
The indicator template is used to customize the content of the overlay which is visible when we hover over the image whose preview is enabled. |
The Image component is used to show a single image to the user with the preview and basic transformations. |
The image component has 3 events named onShow, onHide, and onImageError |
This template is used to set the indicator content for the image. |
Image Styling enables us to modify the default styles and customize them accordingly. |
Share your thoughts in the comments
Please Login to comment...