Gist e3069641ef7186c97e194ceae43bc40a

100%

Gist e3069641ef7186c97e194ceae43bc40a

✓ Published0🌍 Public

Last edited Jan 25, 2018

Created on Jan 9, 2018

This example shows a movie card component with a header, title, year, and details section, all styled using Angular Material’s `mat-card`, `mat-card-header`, and related layout classes. The card displays an image at full width and applies custom spacing to detail rows, with a red title color and 24px font size for the movie title, while the year uses a smaller 14px font. The code relies on Angular Material’s typography and theming via the `mat-card` and `mat-card-header` components, with plain CSS for overrides. The data source is a static markup structure, not fetched dynamically.

AI-generated description

Similar vizzes

Loading thumbnail…

Components styling - sample template

This example demonstrates how to display movie information cards using Angular Material components within a template-driven layout. It shows a movie card containing a title, release year, genre, poster image, and plot summary arranged in a responsive two-column row. The code uses Angular Material’s `mat-card`, `mat-card-header`, `mat-card-title`, `mat-card-subtitle`, and `mat-card-content` APIs, along with the Angular Flex Layout directive `fxLayout` and `fxFlex` for responsive spacing. Data binding via `{{title}}`, `{{year}}`, `{{genre}}`, `{{poster}}`, and `{{plot}}` suggests the card is populated from a movie object, though the underlying data source is not shown.

Aandrei-antal

87% match

Loading thumbnail…

Movies module component registration

This example shows how to register a feature module in an Angular application, defining a `MoviesModule` that declares a single `MovieItemComponent` and configures a child route for the `/movies` path. The code uses Angular’s `NgModule`, `RouterModule.forChild()`, and `CommonModule` to set up the module structure, while the exported `ROUTES` constant specifies that navigating to `movies` renders the movie item component. The data source is not shown, but the rendering approach relies on Angular’s component-based template system.

Aandrei-antal

65% match

Loading thumbnail…

Movies array data

This example visualizes a small dataset of four movies, showing their titles, release years, genres, and plot summaries as static text cards. The visualization uses D3.js to bind the JSON data to DOM elements, rendering each movie’s poster image, title, and metadata in a simple list layout. The code relies on standard D3 selections and data joins to create and update the cards, with no interactive or animated behavior present. The data source is a gist authored by andrei-antal.

Aandrei-antal

63% match

Loading thumbnail…

Material Dynamic Table Angular component - typescript part

This Angular component builds a dynamic Material Design table by registering column, row, header, and footer definitions from projected content. It accepts `displayedColumns`, `displayColumnDefs`, and `dataList` inputs, and emits a `rowSelected` event on click. The code uses Angular Material’s `MatTableDataSource`, `MatTable`, `SelectionModel`, and content queries (`@ContentChildren`) to wire up table parts, while `ngOnChanges` rebuilds the data source when the input list changes. The `showFooter` input controls footer row registration, and `highlightRowIndex` is provided for styling but not handled in this TypeScript portion.

Aackuser

62% match

Loading thumbnail…

Fork of Fork of HTML Starter

This example displays movie details for three films—Baahubali 2, The Godfather, and Jersey—in static SVG cards, each showing a title, a placeholder image, and a release date. It demonstrates how to load and summarize a CSV dataset using D3.js v7, fetching a remote file with `d3.csv` and computing basic statistics about the data’s rows, columns, and memory footprint, which are then printed in a `<pre>` block. The visualization pairs hand-coded SVG markup with a dynamic data-metadata readout, all styled with CSS on a purple background.

NNanditha Reddy

61% match

Loading thumbnail…

Gist 833a8893eb86a523ffc241180a298b1a

This example visualizes a movie database as a network graph, showing connections between movies and the people associated with them. The code uses `d3.forceSimulation` to position nodes, with `node.Person` and `node.Movie` styled distinctly by color and caption. Relationships are rendered as labeled links, and the graph displays node IDs or custom fields like `name` and `title` as captions. The styling is defined in a `movies.grass` file, which specifies colors, borders, and text formatting for all element types.

Aakollegger

59% match

Loading thumbnail…

Gist 85f76a1d46b0309fd975

This example presents a slide deck on HTML5 adoption for an internal IT presentation. It covers HTML5 elements, form enhancements, and new attributes such as `autofocus`, `input type="date"`, `datalist`, and the `dialog` element. The content includes code snippets for JavaScript and HTML, and references live samples like a CodePen demo. It explains how HTML5 simplifies validation and input controls compared to older JavaScript-heavy approaches.

MMiyaton

58% match

Loading thumbnail…

Cards

This example presents a horizontally scrollable gallery of interactive cards, each displaying an image from a shuffled list of external URLs on its front and descriptive placeholder text on its back. Clicking a card triggers a CSS 3D flip animation, revealing the back content, while hovering lifts the card and shifts neighboring cards horizontally to create a stacked effect. The implementation combines plain JavaScript for DOM manipulation and event handling, alongside D3.js v6 for data shuffling and image loading, with all visual effects driven by CSS transitions and transforms.

MMTR

58% match