Set the page title in elm?
In Elm 0.19, there is the type Browser.Document
defined.
type alias Document msg =
{ title : String
, body : List (Html msg)
}
This data specifies the and all of the nodes that should go in the . This means you can update the title as your application changes. Maybe your "single-page app" navigates to a "different page", maybe a calendar app shows an accurate date in the title, etc.
If you create your program with Browser.document
or Browser.application
, you can simply set the title of your web page.
view : Model -> Browser.Document Msg
view model =
{ title = "This goes to the title"
, body = [ text "Hello world!" ]
}
main : Program Flags Model Msg
main =
Browser.document
{ init = init
, view = view
, update = update
, subscriptions = subscriptions
}
As of Elm v0.17 the built-in title
port has been removed, but it's very easy to add the port yourself. The following program will set the page title to "This is the title" at launch:
port module Main exposing (..)
import Html.App as App
import Html exposing (Html, text)
main =
App.program
{ init = init
, view = view
, update = update
, subscriptions = subscriptions
}
port title : String -> Cmd a
type alias Model = {}
init : (Model, Cmd Msg)
init =
({}, title "This is the title")
type Msg
= Noop
update : Msg -> Model -> (Model, Cmd Msg)
update msg model =
case msg of
Noop ->
(model, Cmd.none)
subscriptions : Model -> Sub Msg
subscriptions model =
Sub.none
view : Model -> Html Msg
view model =
text "Hello World"
Then, in Javascript you need to subscribe to the port:
var app = Elm.Main.fullscreen();
app.ports.title.subscribe(function(title) {
document.title = title;
});
The type signature is whatever you define it to be. As an example of a simple app using the title
port to set the title:
import Html exposing (text)
port title : String
port title = "The page title"
main =
text "Hello, World!"
As a slightly more complex example you could set the page title to update to the current time every second
import Html exposing (text)
import Time exposing (every, second)
port title : Signal Float
port title = every second
main =
text "Hello, World!"